Angular - goatandsheep/goatandsheep.github.com GitHub Wiki

• routes
• Services: changing attributes of components dynamically

• put your non-AppComponent classes above @Component()

• Installation: sudo npm install -g @angular/cli
• ng new <app name>: sets up new angular application and directory structure
• ng serve: simulates app locally
  • --open: opens the simulation in your default browser
• ng build:
  • creates dist folder

consolidates components, directives, services, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

the declarations array contains a list of application components, pipes, and directives that belong to the module. A component must be declared in a module before other components can reference it

{{ variable }} prints a variable

*ngFor="let i of arr"

*ngIf="bool": conditionally renders component

• ngSubmit: no worries about blocking default form behaviour
• ngStyle
• ngClass
• ngModel

Putting square brackets around an attribute name, to the left of the equal sign (=), makes it the target of a property binding expression. You must declare a target binding property to be an input property. Otherwise, Angular rejects the binding and throws an error.

<fa-icon (click)="onClick" [ngStyle]="{'color': 'red'}" [icon]="faTimes"></fa-icon>

Events are handled with round brackets

npx ng generate component components/newComponent

A class property

@Input() property:type = "default"

@Output() event = new EventEmitter()

Bubbles events to parent component

A class decorator that allows you to inject services

transforms displayed values within a template

Syntax: {{ value | pipe }}

Similar to filters from AngularJS, but no orderBy nor filter

must add it to your constructor

constructor(private uiService: UiService) {}

npx ng generate service services/newService

routerLink

<router-outlet>

conditionally render features on some pages: if (this.router.link === '/')

subscribe

To do the 2-way data binding, do <input [(ngModel)]="variableName">