Tahir Jadoon: Angular Basics

Install Node, it will also install NPM

To check the version of node, npm and angular
> node --version
> npm --version
> ng --version

To update NPM

> npm install -g npm

Than install angular by issuing the following command

> npm install -g @angular/cli

To uninstall

> npm uninstall -g @angular/cli

Then, run (--force flag might be required)

> npm cache clean

or, if you're using npm > 5.

> npm cache verify

To install a specific version issue following command

> npm install -g @angular/cli@wished.version.here

To install bootstarp locally

>npm install --save bootstrap@X where X is the bootstrap version

Then add it to the angular.json, styles array. make sure that bootstrap is the first one.

Angular CLI commands

Some helpful extensions for Angular when using visual studio code. Get the latest version of these.
   1. Angular and then select Angular v7 Snippets by john papa
   2. Angular Files 1.6.2 Alexander Ivanichev
   4. Angular Language Service 0.1.10 by Angular
   5. Angular2-switcher by infinity1207
   6. Auto Rename Tag 0.0.15 Jun Han
   7. Bracket Pair Colorizer CoenraadS
   8. Debugger for Chrome Microsoft 4.11.0
   9. Material Icon Theme Philipp Kief 3.6.0
   10. Path Intellisense Christian Kohler 1.4.2
   11. Prettier - Code formatter Esben Petersen 1.6.1
   12. TSLint egamma 1.4.40

Create the Anuglar app

>ng new XXX
>cd XXX
>ng serve to run

By default ng serve will open the app on port 4200. To change the port use

>ng serve --port 4201

To stop ng serve, instead of killing the whole process or using ctrl+z, you can simply use ctrl+c to stop the server and can happily use ng serve command without any errors.

Create Component
>ng g c value --spec false or ng g c value --skip-tests true
>ng generate component value --spec false

Create Models either we can create it manually or with the cli
>ng g class models/NAME --type=model --skip-tests true

It will create the model in the models folder.

There are two ways to create the class.

export class Recipe {
        public name: string;
        public description: string;
        public imagePath: string;

        //so that we can use the new key word
        constructor(name: string, desc: string, imagePath: string){
            this.name = name;
            this.description = desc;
            this.imagePath = imagePath;
        }
        }
export class Ingredient {
constructor(public name: string, public amount: number){ }
}

Built in Directives

*ngIf (* is required since it is structural directive)

       <p class="text-info" *ngIf="buttonClicked; else noButton">Button is clicked</p>
       <ng-template #noButton>
          <p class="text-info">Button is not clicked</p>
       </ng-template>

ngStyle
ngClass
*ngFor (* is required since it is structural directive)

*ngFor="let item of servers; let i = index;"

INPUT (Parent to Child)

Child Component (with alias)

import { Component, Input, OnInit } from '@angular/core';
@Input('elementInfo') element: string;

Parent Component (with alias)

<app-server-element *ngFor="let serverElement of serverElements" [elementInfo]="serverElement"></app-server-element>

OUTPUT (Child to Parent)

Child (with alias)

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Output('serverCreatedEvent') serverCreated = new EventEmitter<name: string>();
@Output('blueprintCreatedEvent') blueprintCreated = new EventEmitter<name: string>();
Then emit the event
           onAddServer() {
               this.serverCreated.emit('server');
           }

           onAddBlueprint() {
               this.blueprintCreated.emit('blueprint');
           }

Parent (with alias)

<app-cockpit (serverCreatedEvent)="onServerAdded($event)" (blueprintCreatedEvent)="onBlueprintAdded($event)"></app-cockpit>
serverElements = [];

            onServerAdded(serverData: string) {
                this.serverElements.push(serverData);
            }

            onBlueprintAdded(blueprintData: string) {
                this.serverElements.push(blueprintData);
            }

Local Reference

local references can only be used inside the html template and not in the component.

local references is created with # and then the name. In the following case #serverNameInput will hold a refrence to the whole of the html element.
   <input type="text" class="form-control" #serverNameInput>

and then the button will pass it to the component
   <button class="btn btn-primary" (click)="onAddServer(serverNameInput)">Add Server</button>

and then change the onAddServer method to get the local reference and use its value.
   onAddServer(nameInput: HTMLInputElement) {
        this.serverCreated.emit({serverName: nameInput.value, serverContent: this.newServerContent});
   }

@ViewChild()
Instead of:
        @ViewChild('serverContentInput') serverContentInput: ElementRef;
use
        @ViewChild('serverContentInput', {static: true}) serverContentInput: ElementRef;

The same change (add { static: true } as a second argument) needs to be applied to ALL usages of @ViewChild() (and also @ContentChild())
        If you plan on accessing the selected element inside of ngOnInit().

If you DON'T access the selected element in ngOnInit (but anywhere else in your component), set static: false

Use it as

this.serverContent.nativeElement.value

@ContentChild()

Place a reference on <p> tag which in the in the parent component which is passing the content to ng-template
<p #contentParagraph>

Then on the child component that has the ng-template, do the following

import ElementRef from angular core
        import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
   @ContentChild('contentParagraph', {static: true}) paragraph: ElementRef;

and finally
   import AfterContentInit from angular core
        import { AfterContentInit, Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
   add to the interfaces list
        export class ServerElementComponent implements OnInit, AfterContentInit {
   and then create the ngAfterContentInit hook and console log the content of the paragraph tag
        ngAfterContentInit(){
            console.log(`ParagraphContent:${this.paragraph.nativeElement.textContent}`);
        }

Life Cycle Hooks

ngOnChanges(changes: SimpleChanges): called after a bound property changes, before ngOnInit(). This is the only hook that receives a parameter.
ngOnInit(): called once the component is initialized
ngDoCheck(): called during every change detection run
ngAfterContentInit(): called after content (ng-content) has been projected into view
ngAfterContentChecked(): called every time the projected content has been checked
ngAfterViewInit(): after the component views and child views has been initialized
ngAfterViewChecked(): after every time the views and child views has been checked
ngOnDestroy(): cleanup, once the component is about to be destroyed

Tahir Jadoon

Pages

Monday, 15 February 2021

Angular Basics