Kagula

Mar-13-2023

Introduction

        Introduce the components of Angular by examples.

        The component in Angular is like Window Concept in Win32 C++ Development. I regard it as a page or control. Here I will give examples of how to navigate from pages, and how to communicate between components.

        You can see the complete example from my GitHub.

        Before reading my article you should download my solution first for understanding.

kagula/AngularRouterDemo (github.com)https://github.com/kagula/AngularRouterDemo

Environment

• Visual Studio Community 2022 (Version 17.5.1)
• Angular CLI: 15.2.1
• Node: 18.14.2
• Package Manager: npm 9.5.0
• OS: win32 x64

Content

About the Solution for Examples of How to Use Component and Router

        I create the solution with the "Standalone TypeScript Angular Project " template and add some source code to illustrate how to route and use components in Angular.

         Here, pages and sub-pages are a kind of component, their difference is functionality.

How to Create a Component

ng generate component name
#Example of usage
<project path>\src\app>ng generate component components/button

How to Navigate from one page to another page

        The example is how to jump to the Workspace page from the Welcome page.

Step 1: Create welcome and workspace and other components below the app directory

Step 2: Modify the file app.module.ts as the following

 Step 3: the file app.component.html

        Clear the unused data in the file app.component.html and add the following statement

<router-outlet></router-outlet>

Step 4: the file welcome.component.html

        Modify the file like the below:

<h1>Welcome Page</h1>

<div class="content" role="main">
  <div>
    <a [routerLink]="['/workspace']">
      <i>Example of Go to next page by link.</i>
    </a>
  </div>

  <div>
    <a routerLink="/workspace">
      <i>Example of Go to next page by link (Adopt the another writing style do not affect functionality).</i>
    </a>
  </div>

  <div>
    <button routerLink="/workspace">Example of Go to next page by button.</button>
  </div>

  <div>
    <button routerLink="/workspace" (click)="gotoNextPage()">Example of the type script of go to next page.</button>
  </div>
</div>

Step 5: the file welcome.component.ts

        Modify the file like the below:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

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

  constructor(private router: Router) { }

  gotoNextPage() {
    this.router.navigate(['/workspace']);

    //Further reading ref to https://angular.io/guide/router#specifying-a-relative-route
  }
}

Last Step: Just Run it

 

How to Navigate from one page with a parameter to another page!

Step1: Put Placeholder in the file app.module.ts

Last Step: 

      <!-- Further reading Ref. https://angular.io/start/start-routing -->
      <a [routerLink]="['/workspace/content2', 123]" routerLinkActive="active" class="ms-1">
        <i>[Content2]</i>
      </a>

        According to the file header.component.html.

How to switch the part of the page content!

Step1: Set The Children for the Workspace Component in the file app.module.ts

Step 2: Navigator

        We create the navigator bar in the header component.

the file header.component.html manifest

<div class="container toolbar">
  <div class="row">
    <div class="col-">

      <!-- Example of routerLinkActive Attribute -->
      <!-- Last clicked link will be applied the style class active -->
      <a routerLink="/workspace/content1" routerLinkActive="active">
        <i>[Content1]</i>
      </a>

      <!-- Further reading Ref. https://angular.io/start/start-routing -->
      <a [routerLink]="['/workspace/content2', 123]" routerLinkActive="active" class="ms-1">
        <i>[Content2]</i>
      </a>

      <a routerLink=".." class="ms-1">
        <i>Return to Parent Page</i>
      </a>

      <button type="button" class="btn btn-dark ms-1 px-2" (click)="back()">
        Return to Parent Page by Type Script
      </button>

    </div>
  </div>
</div>

the file header.component.ts manifest

import { Component } from '@angular/core';
import { Router } from '@angular/router';


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

  constructor(private router: Router) { }

  back(): void {
    this.router.navigate(['..']);
  }

}

 Step 3: Placeholder in the file workspace.component.html

<app-header></app-header>
<router-outlet></router-outlet>

Last Step: Run

 

How to communicate between components

        The content1 component will send data to the button component, and the button component will emit the Click event to the content1 component, more detail reading these component source codes.

How to hide the left column in Grid

        See content2.component.html.

Reference

Angular - Angular developer guideshttps://angular.io/guide/developer-guide-overview