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:

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


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


export class ClientCardComponent implements OnInit { 
  client: Client; 
  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() { 


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


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

{{ 'hello' | uppercase }} 
{{ 'HELLO' | lowercase }} 




Services are marked as injectable using the @Injectable decorator

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


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