{"id":1789,"date":"2021-04-10T10:13:00","date_gmt":"2021-04-10T10:13:00","guid":{"rendered":"https:\/\/gauravw.com\/blog\/?p=1789"},"modified":"2021-04-10T10:13:06","modified_gmt":"2021-04-10T10:13:06","slug":"angular-2","status":"publish","type":"post","link":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/","title":{"rendered":"Angular 2+"},"content":{"rendered":"\n

Html \u2013 JS Dev vs Angular Dev<\/strong><\/p>\n\n\n\n

Earlier we would keep these separate. We will manage the DOM via JS. So on click of a button, we will invoke a particular JS \u2013which might validate form inputs.<\/p>\n\n\n\n

Angular works in component based approach, we think in terms of components. So page is divided into components and each component  can have other components inside it. The main component is the root-component.<\/strong><\/p>\n\n\n\n

In angular, we will define form as one component and all the JS is encapsulated inside it. So the components are self-sufficient.<\/p>\n\n\n\n

How does angular start?<\/strong>
The index.html might contain certain elements <root-component> etc. The angular read the file main.ts [the first typescript to be called]. In main.ts we bootstrap the root component\u2019s module. The root component\u2019s module declares a root-component. The root-component\u2019s ts file mentions its selector. So angular understands its selector as the element.<\/p>\n\n\n\n

Node.js<\/strong> \u2013 runtime environment made on Chrome\u2019s V8 JS engine. IT can interpret the code written in angular or other JS frameworks.<\/p>\n\n\n\n

Test = node<\/strong> -v<\/p>\n\n\n\n

NPM<\/strong> – node package manager manages versions of angular modules . It works on package.json which contains the list of dependencies and libraries needed by the project. Similar to pom.xml maven for java, however npm<\/strong> works on git only.<\/p>\n\n\n\n

NPM gets installed with Node installation<\/p>\n\n\n\n

After NPM installs we install CLI(ng) from NPM<\/p>\n\n\n\n

Npm install @angular\/cli    [@group\/package<\/p>\n\n\n\n

Test =  ng<\/strong> -v<\/p>\n\n\n\n

Creation of new project <\/strong><\/p>\n\n\n\n

ng new <project-name><\/strong> \u2013 this creates new files for the project and dependencies for the needed by it using NPM. It will create bare-bones project with some files.<\/p>\n\n\n\n

Angular bootstraps app-root<\/strong> component which needs to be cleaned\/ or a new component created in its place.<\/p>\n\n\n\n

Creation of new Component<\/strong><\/p>\n\n\n\n

ng generate component <component-name> <\/strong><\/p>\n\n\n\n

Angular Component contains<\/p>\n\n\n\n

  1. Html – view<\/li>
  2. Css – view<\/li>
  3. Ts \u2013 backing logic<\/li>
  4. Spec.ts \u2013 unit testing<\/li><\/ol>\n\n\n\n

    Decorators <\/strong>– Everything that begins with @.  @Component, @NgModule, @Injectable<\/p>\n\n\n\n

    To declare a .ts  as a component<\/p>\n\n\n\n

    @Component<\/strong> {<\/p>\n\n\n\n

    selector<\/strong> :  \u201capp-root\u201d \/\/ the tag for this component<\/p>\n\n\n\n

    templateUrl<\/strong> : \u201c.\/app.html\u201d \/\/ relative path<\/p>\n\n\n\n

    styleUrls<\/strong>: \u201c.\/app.css\u201d \/\/ relative path<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    When you add a component, it creates 4 files with a folder and changes module.ts file.
    In a component – template <\/strong>or templateUrl <\/strong>is mandatory.
    selector<\/strong> :  \u201capp-root\u201d – allows to be used <app-root><\/app-root>
    selector<\/strong> :  [app-root] – allows to be used <div app-root><\/div>
    selector<\/strong> :  .app-root – allows to be used <div class=\u201dapp-root\u201d><\/div><\/p>\n\n\n\n


    styleUrls <\/strong>can take multiple css files or one can give it inline with styles<\/strong><\/p>\n\n\n\n

    DATA Binding<\/strong><\/p>\n\n\n\n

    One way binding \/ a. String Interpolation – <\/strong>{{ }}<\/p>\n\n\n\n

    ts file -> html<\/p>\n\n\n\n

    When the value of the variable changes in .ts\/data file, it is reflected in view.<\/p>\n\n\n\n

    One way binding \/ b. Property Binding – <\/strong>[]<\/p>\n\n\n\n

    ts file -> html<\/p>\n\n\n\n

    Used to set properties in ts file to control dom elements in view.<\/p>\n\n\n\n

    <button [disabled]=\u201disDisabled\u201d><\/p>\n\n\n\n

    isDisabled should be a boolean in ts file.

    String interpolation to be used when you want to display a text, property binding when you want to control element behavior using ts attribute.<\/p>\n\n\n\n

    You cannot mix both<\/p>\n\n\n\n

    One way binding \/ c. <\/strong>Event binding<\/strong><\/p>\n\n\n\n

    The <button click=\u201dfunct()\u201d > text <\/button> behaves as browser click.<\/p>\n\n\n\n

    The <button (click)=\u201dfunct()\u201d > text <\/button> behaves as angular click and it will find the function in your component.<\/p>\n\n\n\n

    One can also send funct( $event ).<\/p>\n\n\n\n

    Two way binding – ngModel<\/strong><\/p>\n\n\n\n

    In case we want to update value of variable two ways -i.e data in ts file and UI. It uses the syntax of banana in a box [(ngModel)] = \u201cvariableName\u201d<\/p>\n\n\n\n

    To use this, we need to import FormModule from angular<\/p>\n\n\n\n

    Aysnc refresh a value <\/strong><\/p>\n\n\n\n

    Use JS API – setInterval (  function(), interval  )<\/p>\n\n\n\n

    setInterval ( () ->  this.date = new Date().toDateString() , 1000 ) <\/p>\n\n\n\n

    This ensures that the value date variable changes every second which is defined in the component.
    {{ myFunc(abc, 2) }} \u2013 it  can also call functions and display its values.<\/p>\n\n\n\n

    Directives <\/strong>– Instructions for the DOM<\/p>\n\n\n\n

    Structural Directives – <\/strong>which have * before them.<\/p>\n\n\n\n

    *ngIf<\/strong> \u2013 if condition for JS<\/p>\n\n\n\n

    <div *ngIf = \u201citems.length>2\u201d> <\/div><\/p>\n\n\n\n

    *ngFor<\/strong> \u2013 to loop over elements\/ arrays in JS.
    example <p *ngFor=\u201clet item of items\u201d > {{item.element}}  <\/P><\/p>\n\n\n\n

    The star * is only to indicate the angular interpreter that it needs to transform this into a code that uses string interpolation, property binding which angular understands.<\/p>\n\n\n\n

    The *ngIf block converts to ng-template block with [ngIf] i.e property binding.<\/p>\n\n\n\n

    Attribute Directives<\/strong><\/p>\n\n\n\n

    ngStyle <\/strong>which is a attribute directive used as a property binding. It can help to give a dynamic style to an attribute.<\/p>\n\n\n\n

    <p [ngStyle]=\u201dbackgroundColor: myFunc()\u201d><\/p>\n\n\n\n

    ngClass <\/strong>– similar to above but itnstead of adding css styles, it adds css classes dynamically. <\/p>\n\n\n\n

    <p [ngClass]=\u201dmy-class: myFunc()\u201d><\/p>\n\n\n\n

    Intercommunication between components<\/strong><\/p>\n\n\n\n

    1. Parent to child communication<\/strong><\/li><\/ol>\n\n\n\n

      Giving inputs to the components<\/strong><\/p>\n\n\n\n

      <app-image src=\u201d.\/svg\/icon.gif\u201d > <\/app-image><\/p>\n\n\n\n

      In the image-component.ts<\/p>\n\n\n\n

      @Component {
      selector :  \u201capp-root\u201d \/\/ the tag for this component
      templateUrl : \u201c.\/app.html\u201d \/\/ relative path
      styleUrls: \u201c.\/app.css\u201d \/\/ relative path
      }<\/p>\n\n\n\n

      export class image {<\/p>\n\n\n\n

      @Input(\u2018src\u2019) filePath : string; <\/p>\n\n\n\n

      \u2026 <\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      \u2018src\u2019 is an alias – optional.<\/p>\n\n\n\n

      Input values are populated in ngOnIt() which is called post constructor.. If you try to read the value in constructor, it won’t fetch anything,<\/p>\n\n\n\n

      The above method simply works for string. In case we want to pass an object to a component?<\/p>\n\n\n\n

      We will change the syntax to<\/p>\n\n\n\n

      <app-image [src]=\u201dmyObj\u201d <\/strong>> <\/app-image><\/p>\n\n\n\n

      Here, we have used src in square bracket – property binding, this tell angular to take myObj as an object reference and not as a string.<\/p>\n\n\n\n

      b. Child to Parent Communication<\/strong><\/p>\n\n\n\n

       Giving output \/ Emitting event from component<\/strong><\/p>\n\n\n\n

      in Child component
      @Output(\u2018eventNameAlias\u2019) someEventName: new EventEmitter<MyObj>;<\/p>\n\n\n\n

      void fun () {<\/p>\n\n\n\n

      someEventName.emit();<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      In Parent\u2019s html<\/p>\n\n\n\n

      <child-component (\u2018eventNameAlias\u2019) = \u201cparentsFunction($event)\u201d ><\/p>\n\n\n\n

      Attribute vs Structural Directive<\/strong><\/p>\n\n\n\n

      Attribute Directive – change or affect the element on which they are user<\/p>\n\n\n\n

      Structural Directive –  They begin with * for demarcating. Affect the whole DOM.<\/p>\n\n\n\n

      Making one’s own directive – ng generate directive <name><\/strong><\/p>\n\n\n\n

      a. using just ElementRef approach <\/p>\n\n\n\n

      @Directive({<\/p>\n\n\n\n

        selector: ‘[appBasicHighlight]’<\/p>\n\n\n\n

      })<\/p>\n\n\n\n

      export class BasicHighlightDirective implements OnInit {<\/p>\n\n\n\n

        constructor(private elementRef: ElementRef) {<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

        ngOnInit() {<\/p>\n\n\n\n

      this.elementRef.nativeElement.style.backgroundColor = ‘green’;<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      It is not considered good to change the elements directly. The DOM should be changed by angular’s API.<\/p>\n\n\n\n

      Because some of these styles may not be available in web services etc.<\/p>\n\n\n\n

      b. Using Renderer2 and ElementRef<\/p>\n\n\n\n

        constructor(private elRef: ElementRef, private renderer: Renderer2) { }<\/p>\n\n\n\n

        ngOnInit() {<\/p>\n\n\n\n

      this.renderer.setStyle(this.elRef.nativeElement, ‘background-color’, ‘blue’);<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

       We are using Angular API’s to change DOM<\/p>\n\n\n\n

      c. Using @HostBinding and @HostListener<\/p>\n\n\n\n

      @HostBinding – simply binds\/sets the value to the DOM<\/p>\n\n\n\n

      @HostListener – reacts to the known events in angular and sets the value in DOM<\/p>\n\n\n\n

      @HostBinding(‘style.backgroundColor’) backgroundColor: string;<\/p>\n\n\n\n

      @HostListener(‘mouseenter’) mouseover(eventData: Event) {<\/p>\n\n\n\n

         this.backgroundColor = this.highlightColor;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      backgroundColor, highlightColor can be set using @input \/ property binding.<\/p>\n\n\n\n

      View Encapsulation<\/strong><\/p>\n\n\n\n

      This is  Angular’s way of emulating the Shadom DOM. In this, a style if applied to a component remains local to it. <\/p>\n\n\n\n

      There are three options<\/p>\n\n\n\n

      @Component({
        selector:
        templateUrl:
        styles: ‘
        encapsulation: ViewEncapsulation.None<\/p>\n\n\n\n

      })<\/p>\n\n\n\n

      • ViewEncapsulation.None<\/strong> – No Shadow DOM at all. Global styles<\/li>
      • ViewEncapsulation.Emulated<\/strong> – No Shadow DOM but style encapsulation emulation.<\/li>
      • ViewEncapsulation.Native<\/strong> – Native Shadow DOM with all it\u2019s goodness.<\/li><\/ul>\n\n\n\n

        Note – not all browsers support native dom.<\/p>\n\n\n\n

        Local reference<\/strong><\/p>\n\n\n\n

        a. One can refer the Dom element with #<name><\/p>\n\n\n\n

        <div class=”col-md-9″><\/p>\n\n\n\n

                    <input type=”text” class=”form-control” trim #giftName \/><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

        <div class=”row”><\/p>\n\n\n\n

                    <button class=”btn” (click)=”onAddGift(giftName)”>Add Gift<\/button><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

        onAddGift(giftName: HTMLInputElement) {<\/p>\n\n\n\n

                                   this.userGiftName = giftName.value;<\/p>\n\n\n\n

                                   }<\/p>\n\n\n\n

        b. @ViewChild<\/strong> – make an element in ts file of type ElementRef<\/strong>.<\/p>\n\n\n\n

        <div class=”col-md-9″><\/p>\n\n\n\n

                    <input type=”text” class=”form-control” trim #nickName \/><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

        <div class=”row”><\/p>\n\n\n\n

                    <button class=”btn” (click)=”onAddGift(nickName)”>Add Gift<\/button><\/p>\n\n\n\n

        <\/div><\/p>\n\n\n\n

        onAddGift(nickName: HTMLInputElement) {<\/p>\n\n\n\n

                    ..<\/p>\n\n\n\n

                    this.userNickName = nickName.nativeElement.value;<\/p>\n\n\n\n

                    .<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

        @ViewChild(‘nickName’) nickName : ElementRef;<\/p>\n\n\n\n

        Content Projection<\/strong><\/p>\n\n\n\n

        To write the content between the components.<\/p>\n\n\n\n

        <myComponent><\/p>\n\n\n\n

        <p> hii… this would be ignored<\/p><\/p>\n\n\n\n

        <\/myComponent><\/p>\n\n\n\n

        To make sure it comes change the mycomponents templates with <ng-content><\/ng-content><\/p>\n\n\n\n

        This will place the content between the braces at that location where the tag is present.One cna also enable <ng-content select=”div”> to take up only div elements.<\/p>\n\n\n\n

        Styling \u2013 Local and Global<\/strong><\/p>\n\n\n\n

        Component.css can have common style names as of other components. The angular can handle it. So component 1 can have style as \u201cheader\u201d with some css properties and component 2 can also have \u201cheader\u201d style with other properties. They will not interfere.<\/p>\n\n\n\n

        In order to have global styles, application specific styles \u2013 use styles.css in src folder.<\/p>\n\n\n\n

        Modules<\/strong><\/p>\n\n\n\n

        Are basically a collection of components, services.<\/p>\n\n\n\n

        ng generate module <name>  -> creates a folder with name and name.module.ts file<\/strong><\/p>\n\n\n\n

        To generate components inside this module<\/p>\n\n\n\n

        ng generate component MyModule\/MyApp<\/p>\n\n\n\n

        This will add this component to the declarations parts of the module file.<\/p>\n\n\n\n

        To use a module inside another module<\/strong><\/p>\n\n\n\n

        1. Edit AppModule and add import for MyModule<\/li><\/ol>\n\n\n\n

          @NgModule {<\/p>\n\n\n\n

          Imports :[ CommonModule, MyModule]<\/p>\n\n\n\n

          }<\/p>\n\n\n\n

          1. To Use a component declared in MyModule in AppModule<\/li><\/ol>\n\n\n\n

            Edit MyModule and add exports for MyAppComponent<\/p>\n\n\n\n

            @NgModule {<\/p>\n\n\n\n

            Exports: [MyApp ]<\/p>\n\n\n\n

            }<\/p>\n\n\n\n

            Import statement on top of the file is for the typescript compiler. Needed to link types.<\/p>\n\n\n\n

            Imports in @NgModule decorators is to tell angular which other modules can be used.<\/p>\n\n\n\n

            Service<\/strong><\/p>\n\n\n\n

            ng generate service <MyService><\/p>\n\n\n\n

            creates two files<\/p>\n\n\n\n

            service.ts<\/p>\n\n\n\n

            service.spec.ts<\/p>\n\n\n\n

            @Injectable<\/strong> decorator tells it is a service<\/p>\n\n\n\n

            To use a service in a module<\/p>\n\n\n\n

            @NgModule {<\/p>\n\n\n\n

            Providers<\/strong>: [ MyService ]<\/p>\n\n\n\n

            }<\/p>\n\n\n\n

            To inject this service into a component, you need to change the constructor of the component<\/p>\n\n\n\n

            MyComponent {<\/p>\n\n\n\n

            ..<\/p>\n\n\n\n

            constructor (private serv : MyService ) { }<\/p>\n\n\n\n

            This will automatically inject<\/strong> MyService in MyComponent.<\/p>\n\n\n\n

            It is same as<\/p>\n\n\n\n

            private serv :MyService  ;<\/p>\n\n\n\n

            constructor ( serv : MyService  ) {<\/p>\n\n\n\n

            this. serv = serv;<\/p>\n\n\n\n

            }<\/p>\n\n\n\n

            Services are loaded in a common pool of injection context. So they are not bound to any particular module or component unlike components which are bound to a module which imports them.<\/p>\n\n\n\n

            So a service can be declared in any component and it can be used anywhere.<\/p>\n\n\n\n

            Scope of a Service<\/strong><\/p>\n\n\n\n

            Services are injected using a hierarchical injector in angular.<\/p>\n\n\n\n

             Example. A has two children<\/p>\n\n\n\n

            a—-b, a—c<\/p>\n\n\n\n

            1. If the provider’s array of each of the components will have the service name then all will be using a new instance of service [similar to prototype scope in spring ].<\/p>\n\n\n\n

            2. If component A has service then all its children will get the same service instance. So if only the root component declares the provider for service, then it will be singleton. [the default in spring]<\/p>\n\n\n\n

            Injecting Service into Another Service<\/strong><\/p>\n\n\n\n

            A service can be injected into another service if and if we use @Injectable() over it.<\/p>\n\n\n\n

            @injectable() is to be used on the service – which needs other services injected into it.<\/p>\n\n\n\n

            Angular 6+ Services<\/p>\n\n\n\n

            Instead of adding a service class to the providers[]  array in AppModule , you can set the following config in @Injectable() :<\/p>\n\n\n\n

            • @Injectable({providedIn: <\/strong>‘root’<\/strong>})<\/strong><\/li>
            • export class MyService { … }<\/li><\/ul>\n\n\n\n

              This is exactly the same as:<\/p>\n\n\n\n

              • export class MyService { … }<\/li><\/ul>\n\n\n\n

                and<\/p>\n\n\n\n

                • import { MyService } from ‘.\/path\/to\/my.service’;<\/li>
                •  <\/li>
                • @NgModule({<\/li>
                •    …<\/li>
                •    providers: [MyService]<\/li>
                • })<\/li>
                • export class MyService { … }<\/li><\/ul>\n\n\n\n

                  Using Services for InterComponent Communicatio<\/strong>n<\/p>\n\n\n\n

                  Earlier we have seen using parent child, child parent communication. An alternative is service.<\/p>\n\n\n\n

                  Let\u2019s say if a singleton service exists and we emit an event on its property. This can later be subscribed by some other component using the same service.<\/p>\n\n\n\n

                  this.myservice.subscribe ( something to do );<\/p>\n\n\n\n

                  Making a REST call<\/strong><\/p>\n\n\n\n

                  Import HTTPClientModule in app-root.<\/p>\n\n\n\n

                  User DI to obtain HTTPClient<\/p>\n\n\n\n

                  constructor (private http : HTTPClient ) { }<\/p>\n\n\n\n

                  let response = http.get(\u201curl\u201d);<\/p>\n\n\n\n

                  The response here is not a simple json object. It is an Observable which is an object that handles async calls.<\/p>\n\n\n\n

                  response.subscribe( () -> console.log(\u201cobtained\u201d) )<\/p>\n\n\n\n

                  or<\/p>\n\n\n\n

                  response.subscribe( (json) -> console.log(json) )<\/p>\n\n\n\n

                  So whenever we obtain the response from a web service we execute this function.<\/p>\n\n\n\n

                  Building<\/strong><\/p>\n\n\n\n

                  Ng build \u2013prod<\/p>\n\n\n\n

                  Routing<\/strong><\/p>\n\n\n\n

                  Angular works on Single Page Application<\/p>\n\n\n\n

                  Ng new <routing-component-name> –routing<\/strong><\/p>\n\n\n\n

                  You need to define path , component
                  a default can also be defined<\/p>\n\n\n\n

                  \u201c*\u201d can be a path for component to open an error page.<\/p>\n\n\n\n

                  <router-outlet><\/router-outlet> loads the page at that required location.<\/p>\n\n\n\n

                  For children \u2013 sub routing <\/p>\n\n\n\n

                  {path : \u201csettings\u201d, component : ABCComponent <\/p>\n\n\n\n

                  Children {<\/p>\n\n\n\n

                  path : \u201cprofile\u201d, component : ProfileComponent   \/\/ setttings\/profile<\/p>\n\n\n\n

                  path : \u201csecurity\u201d, component : SecurityComponent \/\/ settings\/security<\/p>\n\n\n\n

                  }<\/p>\n\n\n\n

                  <a href=\u201d\/path\u201d>  – will refresh the entire page<\/p>\n\n\n\n

                  <a routerLink = \u201c\/path\u201d > – behaves as a SPA.<\/p>\n\n\n\n

                  Type of Paths<\/strong><\/p>\n\n\n\n

                  .\/ or direct – relative path<\/p>\n\n\n\n

                  \/something – absolute path<\/p>\n\n\n\n

                  Styling Routes<\/strong><\/p>\n\n\n\n

                  In the tag that encloses <a> tag one can use <\/p>\n\n\n\n

                  <li role=”presentation”<\/p>\n\n\n\n

                             routerLinkActive<\/strong>=”active”<\/p>\n\n\n\n

                             [routerLinkActiveOptions<\/strong>]=”{exact: true}”><\/p>\n\n\n\n

                           <a routerLink=”\/”>Home<\/a><\/p>\n\n\n\n

                         <\/li><\/p>\n\n\n\n

                  First option routerLinkActive <\/strong>sets the active style class and the other is used to set it to be true for exact match for absolute path. Otherwise all links that start with \u201c\/\u201d will be made active.<\/p>\n\n\n\n

                  Navigating Programmatically<\/strong><\/p>\n\n\n\n

                  1. Absolute Path
                    Inject Router in constructor<\/li><\/ol>\n\n\n\n

                    onLoadServer() {<\/p>\n\n\n\n

                       this.router.navigate([‘\/servers’]);<\/p>\n\n\n\n

                     }<\/p>\n\n\n\n

                    1. Relative Path – it needs the active routes information
                      Inject Router and ActivatedRoute in constructor<\/li><\/ol>\n\n\n\n

                      this.router.navigate([‘servers’] , {relativeTo: this.activatedRoute} );<\/p>\n\n\n\n

                       <\/strong>Passing Params Dynamically<\/strong><\/p>\n\n\n\n

                      Passing params
                      { path: ‘servers\/:id’, component: ServerComponent) <\/p>\n\n\n\n

                      Retrieving Params
                      Inject ActivatedRoute
                      this.activatedroute.snapshot.params[‘id’]<\/p>\n\n\n\n

                      Retrieving Params Reactively
                      If one of the same components tries to click on the link that tries to open the same component again – angular wouldn’t reload the component.
                      However, in order to reload\/re-instantiate the component one can subscribe to the changes in the params in ngOnInit().<\/p>\n\n\n\n

                      this.paramsSubscription = this.route.params<\/p>\n\n\n\n

                           .subscribe(  (params<\/em>: Params) =><\/em> {<\/p>\n\n\n\n

                               this.user.id = params[‘id’];       }<\/p>\n\n\n\n

                      However, also unsubscribe the event on ngOnDestroy()<\/p>\n\n\n\n

                      Passing Query Params and Fragments<\/strong><\/p>\n\n\n\n

                      1. using <a> tag
                        <a  [routerLink]=”[‘\/servers’, server.id]”<\/li><\/ol>\n\n\n\n

                               [queryParams<\/strong>]=”{allowEdit: server.id === 3 ? ‘1’ : ‘0’}”<\/p>\n\n\n\n

                               fragment<\/strong>=”loading”><\/p>\n\n\n\n

                               {{ server.name }}<\/p>\n\n\n\n

                             <\/a> <\/p>\n\n\n\n

                        b.  using function
                        this.router.navigate([‘\/servers’, id, ‘edit’], {queryParams: {allowEdit: ‘1’}, fragment: ‘loading’});<\/p>\n\n\n\n

                        \/server\/1\/edit?allowEdit=1#loading<\/p>\n\n\n\n

                        Retrieving Query Params and Fragment<\/strong>
                        Inject ActivatedRoute
                        this.activatedroute.snapshot.queryparams[‘allowEdit’]<\/p>\n\n\n\n

                        Retrieving Params Reactively
                        Similar to params , one can subscribe to the changes in the query params in ngOnIt().
                        <\/p>\n\n\n\n

                        Note : the params retrieved from url are in string. So if you consider passing them make sure to typecast them.<\/p>\n\n\n\n

                        Preserving or merging query params on click of new link<\/strong><\/p>\n\n\n\n

                        queryParamsHandling: “preserve” – lets them remain same<\/p>\n\n\n\n

                        queryParamsHandling: “merge”- merges any new params in the link<\/p>\n\n\n\n

                        Child Routes<\/strong><\/p>\n\n\n\n

                        In case there are multiple components inside a component which are its children. So one can give routing in this manner.<\/p>\n\n\n\n

                        { path: \u201c\u201d , component : HeadComponent, children <\/strong>: {<\/p>\n\n\n\n

                        { path : \u201c\u201d , component : ChildComponent }<\/p>\n\n\n\n

                        } } Note : the path here needs to be relative one as it is a child\u2019s path<\/p>\n\n\n\n

                        Add <router-outlet> to HeadComponent instead of ChildComponent\u2019s selector tag. This will load only child of this component.<\/p>\n\n\n\n

                        Redirecting to non found page<\/strong><\/p>\n\n\n\n

                        { path “not-found” , redirectTo : PageNotFoundComponent },<\/p>\n\n\n\n

                        { path “**” , redirectTo :” \/not-found” }<\/p>\n\n\n\n

                        ** is whatever path angular doesnt understand.<\/p>\n\n\n\n

                        redirectTo – changes the url to point to this<\/p>\n\n\n\n

                        pathMatch: ‘full’<\/p>\n\n\n\n

                         Angular uses prefix matching by default. this can cause issues because ” will match every URL.<\/p>\n\n\n\n

                         Router Guards<\/strong><\/p>\n\n\n\n

                         1. CanActivate Guard<\/strong> – To block access to certain URL’s which do not have the permission to access the resource.<\/p>\n\n\n\n

                        Steps<\/p>\n\n\n\n

                        a. Implement CanActivate in a class(this is called a Guard class) and implement the method canActivate() which returns a true or false.<\/p>\n\n\n\n

                        b. Invoke a service inside this method to decide on the access.<\/p>\n\n\n\n

                        c. Add this class to providers [because it acts a service]<\/p>\n\n\n\n

                        d. In const of routes, add canActivate property and name the Guard class in array. There can be many Guards<\/p>\n\n\n\n

                        path: ‘artist\/:artistId’,  component: ArtistComponent, canActivate: [AlwaysAuthGuard]<\/p>\n\n\n\n

                         2. CanActivateChild Guard<\/strong><\/p>\n\n\n\n

                        For child routes – same steps only a different interface CanActivateChild needs to be implemented and different property<\/p>\n\n\n\n

                        path: ‘artist\/:artistId’,  component: ArtistComponent, canActivateChild: [AlwaysAuthChildGuard]<\/p>\n\n\n\n

                        3. CanDeactivate Guard<\/strong> – suppose a user is changing form data and before saving, user tries to navigate away. In this scenario we can use CanDeactivate guard which will deactivate the route and open a Dialog Box to take user confirmation. This Guard is usally only a single one for application.<\/p>\n\n\n\n

                        It works on Command Design pattern<\/p>\n\n\n\n

                        a. Create a new interface which has only a  canDeactivate() method that returns either an observable, promise or boolean.<\/p>\n\n\n\n

                        b. Make a new Guard class which extends CanDeactivate<T>. Above new interface will act as a generic type to CanDeactivate<your new Interface type here><\/p>\n\n\n\n

                        c. In the class we will call the component’s canDeactivate method.<\/p>\n\n\n\n

                        d. Add this class to providers [because it acts a service]<\/p>\n\n\n\n

                        e. Any class which needs to be Guarded needs to implement CanDeactivate<Component>.<\/p>\n\n\n\n

                        f. In const of routes, add canActivate property and name the Guard class in array. There can be many Guards<\/p>\n\n\n\n

                        path: ‘artist\/:artistId’,  component: ArtistComponent, canDeactivate: [DeActivateGuard]<\/p>\n\n\n\n

                        Passing data to a route can be done statically via (data : “string” in routes) and dynamically by a resolver ( intermediate code to be executed when a link has been clicked and before a component is loaded)<\/p>\n\n\n\n

                        Observables<\/strong><\/p>\n\n\n\n

                        Observables are data sources – could be events, Http requests, Triggers in code (All of which happen at a random time so its async in nature).<\/p>\n\n\n\n

                        These need to be handled by angular. An Observer handles them. An observer has three parts – normal execution, error situation , completion of execution.<\/p>\n\n\n\n

                        So when you subscribe to a variable – > the variable is itself an Observable and everything inside subscribe(  observer: Observer  ) is an observer.<\/p>\n\n\n\n

                        myobserver : Subscription = abc.subscribe()<\/p>\n\n\n\n

                        onDestroy() {<\/p>\n\n\n\n

                                     this.myobserver.unsubscribe();<\/p>\n\n\n\n

                        }<\/p>\n\n\n\n

                        Observables need to be unsubscribed if they are created by the user.. Angular ones are automatically taken care of.<\/p>\n\n\n\n

                        We pass values to an observer using observer.next( \/\/some value here );<\/p>\n\n\n\n

                        Subjects<\/strong><\/p>\n\n\n\n

                        They act as both observer and observable. They can be effective for communication between components. They can replace EventEmitter<\/p>\n\n\n\n

                        Example<\/p>\n\n\n\n

                        A simple class lets say MyService has an object on subject.<\/p>\n\n\n\n

                        Two components A and B inject this service.<\/p>\n\n\n\n

                        A can pass values to the subject.<\/p>\n\n\n\n

                        B can subscribe and read those values.<\/p>\n\n\n\n

                        Pipe<\/strong><\/p>\n\n\n\n

                        Transforms the output without changing the property<\/p>\n\n\n\n

                        {{name | uppercase }}<\/p>\n\n\n\n

                        You can chain pipes.<\/p>\n\n\n\n

                         You can make a custom pipe too by implementing PipeFilter interface or using ng generate pipe <name> command. Each pipe is initially impure (won’t react on changes if the value has changed). It can be made pure with a performance hit.<\/p>\n\n\n\n

                         You can have async pipes<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

                        Html \u2013 JS Dev vs Angular Dev Earlier we would keep these separate. We will manage the DOM via JS. So on click of a button, we will invoke a particular JS \u2013which might validate form inputs. Angular works in component based approach, we think in terms of components. So page is divided into components […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-1789","post","type-post","status-publish","format-standard","hentry","category-tech-learnings"],"yoast_head":"\nAngular 2+ » Gaurav Wadhwani<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 2+ » Gaurav Wadhwani\" \/>\n<meta property=\"og:description\" content=\"Html \u2013 JS Dev vs Angular Dev Earlier we would keep these separate. We will manage the DOM via JS. So on click of a button, we will invoke a particular JS \u2013which might validate form inputs. Angular works in component based approach, we think in terms of components. So page is divided into components […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Gaurav Wadhwani\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-10T10:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-10T10:13:06+00:00\" \/>\n<meta name=\"author\" content=\"Gaurav Wadhwani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gaurav Wadhwani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/\"},\"author\":{\"name\":\"Gaurav Wadhwani\",\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#\\\/schema\\\/person\\\/9a05a9c3487f35f6b4577c6956cf252e\"},\"headline\":\"Angular 2+\",\"datePublished\":\"2021-04-10T10:13:00+00:00\",\"dateModified\":\"2021-04-10T10:13:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/\"},\"wordCount\":3437,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#\\\/schema\\\/person\\\/9a05a9c3487f35f6b4577c6956cf252e\"},\"articleSection\":[\"Tech Learnings\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/\",\"url\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/\",\"name\":\"Angular 2+ » Gaurav Wadhwani\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#website\"},\"datePublished\":\"2021-04-10T10:13:00+00:00\",\"dateModified\":\"2021-04-10T10:13:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/2021\\\/04\\\/angular-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 2+\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/\",\"name\":\"Gaurav Wadhwani\",\"description\":\"Where I write \\\/ scribble\",\"publisher\":{\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#\\\/schema\\\/person\\\/9a05a9c3487f35f6b4577c6956cf252e\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/gauravw.com\\\/blog\\\/#\\\/schema\\\/person\\\/9a05a9c3487f35f6b4577c6956cf252e\",\"name\":\"Gaurav Wadhwani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g\",\"caption\":\"Gaurav Wadhwani\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/gauravw.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 2+ » Gaurav Wadhwani","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/","og_locale":"en_US","og_type":"article","og_title":"Angular 2+ » Gaurav Wadhwani","og_description":"Html \u2013 JS Dev vs Angular Dev Earlier we would keep these separate. We will manage the DOM via JS. So on click of a button, we will invoke a particular JS \u2013which might validate form inputs. Angular works in component based approach, we think in terms of components. So page is divided into components […]","og_url":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/","og_site_name":"Gaurav Wadhwani","article_published_time":"2021-04-10T10:13:00+00:00","article_modified_time":"2021-04-10T10:13:06+00:00","author":"Gaurav Wadhwani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gaurav Wadhwani","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/#article","isPartOf":{"@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/"},"author":{"name":"Gaurav Wadhwani","@id":"https:\/\/gauravw.com\/blog\/#\/schema\/person\/9a05a9c3487f35f6b4577c6956cf252e"},"headline":"Angular 2+","datePublished":"2021-04-10T10:13:00+00:00","dateModified":"2021-04-10T10:13:06+00:00","mainEntityOfPage":{"@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/"},"wordCount":3437,"commentCount":0,"publisher":{"@id":"https:\/\/gauravw.com\/blog\/#\/schema\/person\/9a05a9c3487f35f6b4577c6956cf252e"},"articleSection":["Tech Learnings"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/","url":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/","name":"Angular 2+ » Gaurav Wadhwani","isPartOf":{"@id":"https:\/\/gauravw.com\/blog\/#website"},"datePublished":"2021-04-10T10:13:00+00:00","dateModified":"2021-04-10T10:13:06+00:00","breadcrumb":{"@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gauravw.com\/blog\/2021\/04\/angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gauravw.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 2+"}]},{"@type":"WebSite","@id":"https:\/\/gauravw.com\/blog\/#website","url":"https:\/\/gauravw.com\/blog\/","name":"Gaurav Wadhwani","description":"Where I write \/ scribble","publisher":{"@id":"https:\/\/gauravw.com\/blog\/#\/schema\/person\/9a05a9c3487f35f6b4577c6956cf252e"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gauravw.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/gauravw.com\/blog\/#\/schema\/person\/9a05a9c3487f35f6b4577c6956cf252e","name":"Gaurav Wadhwani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g","caption":"Gaurav Wadhwani"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/788ed9666a6c4e011516ae9c744df4be274dcf933161c99a4ec7e06311d2d416?s=96&d=mm&r=g"},"sameAs":["http:\/\/gauravw.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/posts\/1789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/comments?post=1789"}],"version-history":[{"count":1,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/posts\/1789\/revisions"}],"predecessor-version":[{"id":1790,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/posts\/1789\/revisions\/1790"}],"wp:attachment":[{"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/media?parent=1789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/categories?post=1789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gauravw.com\/blog\/wp-json\/wp\/v2\/tags?post=1789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}