GitHub Repo
Notes are WIP
From Stephen Grider's course: The Modern Angular Bootcamp: link
  • 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:
  • 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() {
  • 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>

<!-- 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>
  • Style Binding:
    • <div
        [style.background-color]="clickCounter > 4 ? 'yellow' : 'blue'"
      <!-- 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
            'background-color': clickCounter > 4 ? 'yellow' : 'blue',
            'border': clickCounter > 4 ? '4px solid black' : 'none'
  • Class binding:
    • <div class="play-container" []="clickCounter > 4">
      <!-- The class active is applied only if condition inside " " is true -->
    • For multiple classes: use ngClass
      • <div
            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
  • 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
        ng generate service http
        # "http" is user defined
    • in http.service.ts file:
      • import { Injectable } from '@angular/core';
        import { HttpClient } from '@angular/common/http';
          providedIn: 'root',
        export class HttpService {
          constructor(private http: HttpClient) // dependency injection
          getBeer() {
            return this.http.get('');
    • 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';

Loading Comments...