(FRONT) FRONT (2023)

[Angular mosaic 1] My fast style, Intercept routing events (router-outlet onActivate event, @Input, extends base page).

This page contains a small fast notes for myself, because I have no big experience with Angular and I need some notes to switching to Angular faster from other my programmer's environment.


1. My fast style (background, NAV menu, header) to my various technical sites.

There are a lot of various free Angular site styles, for example, look to https://github.com/coreui/coreui-free-angular-admin-template, but I use my own template.



2. Intercept and analyzing routing events (router-outlet onActivate event)

Router module has a couple of very important events.



We can intercept this events


   1:  <div class="container">
   2:    <app-menu></app-menu>
   3:    <main>
   4:      <app-title></app-title>
   5:      <router-outlet (activate)='onActivate($event)'></router-outlet>
   6:    </main>
   7:  </div>

And analyze it (menu.component.ts).


   1:  import { Component, OnInit } from '@angular/core';
   2:  import { Router } from '@angular/router';
   3:  import { takeUntil } from 'rxjs';
   4:  import { Subject } from 'rxjs/internal/Subject';
  10:  ...
  11:  @Component({
  12:    selector: 'app-menu',
  13:    templateUrl: './menu.component.html',
  14:    styleUrls: ['./menu.component.css']
  15:  })
  16:  export class MenuComponent implements OnInit {
  17:   
  18:    public ShowLoginButton: boolean = true;
  19:    private destroyed$ = new Subject();
  20:   
  21:    constructor(private router: Router) {
  22:      this.router.events
  23:      .pipe(takeUntil(this.destroyed$))
  24:      .subscribe(event => {
  25:        console.log(event);
  26:      });
re>


3. Pass parameters from one component to another (@Input, extends base page)

First main Angular future is pass parameters from one component to another. This is a pattern to do this (app.component.html).


   1:  <div class="container">
   2:    <app-menu></app-menu>
   3:    <main>
   4:      <app-title [PageTitle]="MyPageTitle" [PageDetails]="MyPageDetails"></app-title>
   5:      <router-outlet></router-outlet>
   6:    </main>
   7:  </div>

In this case component app-title accept input two parameters.


   1:  <section id="main_info">
   2:      <div class="main_info">
   3:          <div class="main_info__title">
   4:              <h1>{{PageTitle}}</h1>
   5:              <p>
   6:                  {{PageDetails}}
   7:              </p>
   8:          </div>
   9:          <app-title-user *ngIf="ShowCabinet">
  10:          </app-title-user>
  11:          <app-title-anon *ngIf="!ShowCabinet">
  12:          </app-title-anon>
  13:      </div>
  14:  </section>

   1:  import { Component, Input, OnInit } from '@angular/core';
   6:  ...
   7:  @Component({
   8:    selector: 'app-title',
   9:    templateUrl: './title.component.html',
  10:    styleUrls: ['./title.component.css']
  11:  })
  12:   
  13:  export class TitleComponent implements OnInit {
  14:   
  15:    @Input() public PageTitle: string = "";
  16:    @Input() public PageDetails: string = "";
  18:  ...;
  19:    constructor(

  23:  ...

And each page has base page routed-component.ts.


   1:  export class RoutedComponent {
   2:      PageTitle: string="";
   3:      PageDetails: String="";
   4:  }

And extends base page.


   1:  import { Component, OnInit } from '@angular/core';
   2:  import { RoutedComponent } from '../routed-component';
   5:  ...
   6:  @Component({
   7:    selector: 'app-settings',
   8:    templateUrl: './settings.component.html',
   9:    styleUrls: ['./settings.component.css']
  10:  })
  11:  export class SettingsComponent extends RoutedComponent implements OnInit {
  12:    constructor() {
  13:      super();
  14:      this.PageTitle="Settings"
  15:      this.PageDetails = "User profile settings"
  16:      console.log("Settings-constructor");
  17:    }

Than route interceptor need to transfer this values from base page to app-title component (app.component.ts).


   1:  import { Component } from '@angular/core';
   2:   
   3:  @Component({
   4:    selector: 'app-root',
   5:    templateUrl: './app.component.html',
   6:    styleUrls: ['./app.component.css']
   7:  })
   8:   
   9:  export class AppComponent {
  10:   
  11:    MyPageTitle:string = "";
  12:    MyPageDetails: string ="";
  13:   
  14:    title = 'CryptoChest';
  15:   
  16:    onActivate(component: { PageTitle: string; PageDetails: string}){
  17:      console.log("router-outlet-onActivate");
  18:      if(component.PageTitle){
  19:        this.MyPageTitle = component.PageTitle;
  20:        this.MyPageDetails = component.PageDetails;
  21:      }
  22:    }
  23:  }




Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23> 
Link to this page: http://www.vb-net.com/AngularMosaic/Index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>