Angular

Notes are WIP

• add different file types' description

• add event-binding syntax definition from lecture 10

• add property-binding syntax definition from lecture 11 (can also put method call in there inside " ")

• Interpolation syntax from lecture 12

• Structural Directive from lecture 22

• Attribute Directive from lecture 22

• All of above in lecture 24

• Add static files like images to Angular

• Components lec 30

• commands like ng generate component <name>

• How to nest a component inside another lec 31

• How angular creates components lec 32

• Decorator in Angular

@Component({
	selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

 

• Angular says anytime I see any HTML element with the name 'app-root' (See above), I will create an instance of the component (which is defined below the decorator (see below e.g.)) and show it on the DOM

export class AppComponent {
  title = 'angular-cards';
}

• Flow diagram at lec 32: 3.34

• CSS Scoping lec 33

• Tying Data to component lec 34

• Accepting data in a child component lec 35

• Setting up Input Binding (communicating from parent to child component) lec 36

• lec 36: 3.26

• ngFor lec 38 and 39, lec 48: 7.56

• Host element CSS Selector lec 40

• Pipes definition and use : lec 51

• pipes list: angular.io/api?type=pipe

• pass arguments to pipe lec 56:4.08

• different examples of pre-defined types

• Console logging in .ts file on render/load: in constructor like this:

constructor() {
    console.log(this.car);
  }

• An object gets displayed on html template as [object Object] by default. Instead use json pipe.

• Async pipe to be discussed later.

• custom pipes with example, also how to generate using angular cli lec 61
• custom arguments in custom pipes lec 62 ...args: unknown[]: args is an array of all the arguments being passed from the template

• multiple arguments in pre-defined/custom pipes lec 62:1.41

• for only 1 argument, best practice to replace ...args in pipe lec 62:2.11

• Throw error from custom pipe lec 62: 4.03

• 2 neat things about pipes lec 63:
• We can use pipes anywhere inside a template html not only inside interpolation syntax. Wrap the property with pipe with arguments inside ( ) if we are using other operators like <, > etc. like this ngIf="(miles | convert: 'km') > 10"
• Using multiple pipes together by chaining them together: One pipe result into another pipe like this miles | convert: "m" | number: "1.0-2"

• Directives defn and usage: lec 64: 0.19

• ngFor, ngIf, ngClass lec 68,69 and before

• running code inline inside click event lec 71:0.56

• ng-container lec 74: 4.30
• we can only have one attribute prefixed with *ng i.e. we can apply only one structural directive to any given html element
• ng-container is like an invisible element used to get around the rule of 1 structural directive per element

• ngSwitch directive lec 75
• Multiple matching cases are all going to be displayed.

• Custom Attribute Directives lec 76-81

• Custom Structural Directive lec 82-83
• What is generic type? Not in the video, so not understood.

• As directives are so similar to components, instead of creating a custom directive, it might be easier to create a component.

Notes from Angular Crash Course (video, post, code):

• can initialize the starter app with routing and css as below:

ng new sintiaWeb-app --routing --style=scss

• we link to different pages/routes in angular using the following syntax:

<a href="#" routerLink="/list">Breweries</a>

• <router-outlet> is where our router components are going to be displayed in our template. Have to import RouterModule in app.module.ts file to use <router-outlet>. import it like this.

• We also need a app-routing.module.ts file in the same file level as app.component.ts to import the routes we will be using like this:

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  { path: 'list', component: ListComponent },
];

• component that has a path ' ' will load first in <router-outlet>

• Generate components: using angular CLI (Also in above notes)

• 1 way data binding will bind the data from the component to the view (DOM) OR from view to the component. like using {{ }} (interpolation) or button click event etc.

• 2 way data binding helps to exchange data from the component to view AND from view to the component. We have to import FormsModule in app.module.ts for ngModel and 2 way data binding to work. Basically, the value in ngModel is received and sent from and to component file and template file.

• <ng-template> is used for using ngIf and ngIfElse

<ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
    <p>The click counter is greater than 4.</p>
</ng-template>

<!-- Stuff inside above ng-template is displayed when condition inside ngIf is true -->

<!-- Below ng-template represents the "none" in ngIfElse which is shown when condition 
	inside ngIf is false -->

  <ng-template #none>
    <p>The click counter is not greater than 4.</p>
</ng-template>

• Style Binding:

<div
  class="play-container"
  [style.background-color]="clickCounter > 4 ? 'yellow' : 'blue'"
>
...stuff...
</div>

<!-- The div has background color changes dynamically based on condition inside the " " -->

• For changing multiple style properties at once (in above, we were only changing one style property i.e. background-color): use ngStyle

<div
  class="play-container"
  [ngStyle]="{
    'background-color': clickCounter > 4 ? 'yellow' : 'blue',
    'border': clickCounter > 4 ? '4px solid black' : 'none'
  }"
>
  ...stuff....
</div>

• Class binding:

<div class="play-container" [class.active]="clickCounter > 4">
...stuff....
</div>

<!-- The class active is applied only if condition inside " " is true -->

• For multiple classes: use ngClass

<div
  class="play-container"
  [ngClass]="{
    active: clickCounter > 4,
    notactive: clickCounter <= 4
  }"
>
  <ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
    <p>The click counter is greater than 4.</p></ng-template
  >
  <ng-template #none>
    <p>The click counter is not greater than 4.</p></ng-template
  >
</div>

• Services:
• are like special components reusable throughout the app.
• we can use a service to commmunicate with an api and fetch data to display it.
• generate a service using the CLI:

ng g s http
OR
ng generate service http

# "http" is user defined

• in http.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class HttpService {
  constructor(private http: HttpClient) // dependency injection
 {}

  getBeer() {
    return this.http.get('https://api.openbrewerydb.org/breweries');
  }
}

• How to use the service we created above in a component:

export class ListComponent implements OnInit {
  constructor(private _http: HttpService)  // dependency injection
{}

// we can now use _http below to use it
  ngOnInit(): void {
    // code here runs when component is loaded

		//we can subscribe to below as it returns an observable..

• to use the http module, we have to import HttpClientModule in app.module.ts

import { HttpClientModule } from '@angular/common/http';