Angular

Last updated Nov 8, 2022 Edit Source

A frontend development platform built on TypeScript.

1
2
3

ng generate component <name>

ng g c <name>

A file in the form of <name>.component.ts will be generated.

1
2
3
4
5
6
7
8

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
  /* . . . */
}

selector

A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an application’s HTML contains <app-hero-list></app-hero-list>, then Angular inserts an instance of the HeroListComponent view between those tags.

templateUrl

The module-relative address of this component’s HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component’s host view.

providers

An array of  providers for services that the component requires. In the example, this tells Angular how to provide the HeroService instance that the component’s constructor uses to get the list of heroes to display.

In a file in the form of <name>.component.html.

We can use pipes to transform values into a specific display format in our view.

Angular defines various pipes, such as the  date pipe and  currency pipe; for a complete list, see the  Pipes API list. You can also define new pipes.

To specify a value transformation in an HTML template, use the  pipe operator (|):

1

{{interpolated_value | pipe_name}}

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

They alter layout by adding, removing, and replacing elements in the DOM. Guide

1
2

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

They alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name. Guide

1
2
3

ng generate service <name>

ng g s <name>

Angular uses Dependency Injection to increase modularity.

Use to utilize a service:

1
2
3
4
5
6
7

export class ProductDetailsComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private cartService: CartService
  ) { }
}

Configure HTTPModule

Data is passed from services to components via Observables

Get

1
2
3
4
5
6

class SomeService{
	constructor(private http: HttpClient){}
	get(): Observable<Task[]>{
		return this.http.get<Task[]>(this.apiUrl)
	}
}

Post

Delete

Put

Error handling

Makes use of the Observer Pattern.

We use Observables when there is some stream of data that is changing and we have multiple subscribers that want to change when there is some new data.

RxJS provides multiple functions to modify how often we want to call next(), in what ways to format the data etc.