Cheatsheet do Angular 2

Instalando o Angular CLI

Se você ainda não tem o Angular CLI instalado, rode:

npm install -g @angular/cli

Obs: Para instalar corretamente a versão do nodejs tem que ser 6x ou +

Atualizando a versão do Angular 4:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Criando o projeto:

ng new my-first-angular2 --style=sass --routing=true

Esse comando irá gerar um novo projeto nomeado my-first-angular2, nós iremos utilizar SASS como formatação de estilo padrão.

Estrutura de Arquivos

-> app
  -> components
    -> ...
    -> components.module.ts
  -> guards
    -> auth.guard.ts
  -> models
    -> ...
    -> model.ts
  -> pages
    -> ...
    -> teste-page.ts
  -> providers
    -> ...
    -> teste.service.ts
  -> ...
  -> app.routing.ts

Gerando um component com Angular CLI:

ng g c COMPONENT

ou dentro de outro component:

ng g c COMPONENT1/COMPONENT2

Gerando um service com Angular CLI

ng g s SERVICE

Criando um model no Angular 2

Ex:

export class Model {
  public constructor(
    public provider: string,
    public uid: string,
    public name: string,
    public nickname: string,
    public image: string,
    public crp: string,
    public type: string,
    public email?: string,
    public id?: number
  ){}
}

Separando os components

Após criar o arquivo que irá modularizar os nossos components (components.module.ts), iremos adicionar no app.module.ts:

// ...
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
// ...
imports: [
  // ...
  AppRoutingModule,
  ComponentsModule
],
// ...

Nomeclaturas

• Bind, realiza um bind de eventos.
  • (click)="function()" -> Ao clicar faça algo
  • (keyup.enter)="function()" -> Ao pressionar Enter faça algo
• Two way data bind
  • [(ngModel)]="" ->

Instalando jquery no componente

Primeiro instale o jquery via npm: npm i --S jquery

Após a instalação adicione no componente que você quer utilizar: import * as $ from 'jquery'

Trabalhando com *ngFor

<div *ngFor="let item of items; let i = index"></div>

*ngFor com Limite

<div *ngFor="let item of items | slice:0:10; let i = index"></div>

Trabalhando com *ngIf

<div *ngIf="condition"></div>

Trabalhando com [ngClass]

Queremos esconder uma SideBar menu, no componente adicione:

...
opened: boolean;

constru...

openMenu() {
  this.opened = true;
}
...

Na view do componente adicionamos o bind:

<!-- Um toggle button para abrir o menu  -->
<a class="btn" (click)="openMenu()">Open Menu></a>

<!-- Menu abre escondido  -->
<div [ngClass]="{'is-hidden': !opened}"></div>

Setando um Time Out para carregar um componente

Na view:

<div [hidden]="loading != true">
  <span>Carregando</span>
</div>

No component:

...
loading: boolean = true;

onInit() {
  setTimeout(() => {
    this.load();
    this.loading = false;
  }, 1*1000)
}
...