TIL 5-17-21

Angular & decorators

Angular makes extensive use of decorators, from what I’ve seen thus far. while you can write your own decorators in Typescript, you spend a lot of time using pre-existing decorators, that are shipped with the Angular package. look out for the @ syntax to identify decorators. examples below:

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
  `
})

src

class BankAccount {
  // This property is bound using its original name.
  @Input() bankName: string;
 }

src

export class ClientCardComponent implements OnInit { 
  @Input() 
  client: Client; 
 
  @Output() 
  deleteRequested = new EventEmitter<void>(); 
 
  constructor() { 
  } 
 
  delete() { 
    this.deleteRequested.emit(); // here we simply emit an empty 
    event, but we could also pass data in the event 
  } 
 
  ngOnInit() { 
  } 
} 

src

more Angular notes (misc)

Directivesare Angular elements that you can use to dynamically modify the DOM src

there are 3 types of directive

1. Components
2. Structural directives: These modify the structure of the DOM eg *ngFor & *ngIf
3. Attribute directives: These alter or transform existing elements eg ngModel, ngStyle. ngClass & ngSwitch

Pipes

some built in examples, although I’ve seen & made use of custom pipes:

{{ 'hello' | uppercase }} 
<br> 
{{ 'HELLO' | lowercase }} 

yields:

HELLO 
hello 

Services

Services are marked as injectable using the @Injectable decorator

import { Injectable } from '@angular/core'; 
 
@Injectable( 
  providedIn: 'root' 
) 
export class BookServiceImpl implements BookService { 
  ... 
} 

src

Dependency Injection

can’t talk about services without touching on dependency injection, right?😅

1. The Old Way™ of doing DI in Angular — providers: []
2. The New Way™ of doing DI in Angular — providedIn: 'root' | SomeModule src

more src