Angular 6 - Get current route and it's data

 How to get current route you're in and get's it's data, children and it's parent?

say if this is the route structure:

const routes: Routes = [

    {path: 'home', component: HomeComponent, data: {title: 'Home'}},

    {

      path: 'about', 

      component: AboutComponent, 

      data: {title: 'About'},

      children: [

        {

          path: 'company',

          component: 'CompanyComponent',

          data: {title: 'Company'}

        },

        {

          path: 'Hr',

          component: 'HrComponent',

          data: {title: 'HR'}

        },

        ...

      ]

    },

    ...

  ]

 

Below is the solution code:

@Component({...})

export class CompanyComponent implements OnInit {

constructor(

  private router: Router,

  private route: ActivatedRoute

) {}

ngOnInit() {

this.pageTitle = this.route.snapshot.data['title'];

  // Parent:  about 

  this.route.parent.url.subscribe(url => console.log(url[0].path));

  // Current Path:  company 

  this.route.url.subscribe(url => console.log(url[0].path));

  // Data:  { title: 'Company' } 

  this.route.data.subscribe(data => console.log(data));

  // Siblings

  console.log(this.router.config);

}

}

Passing data between routes using State

Continue Reading →

Subject with Example | Angular2+

 What is a Subject?

Subject is a type of Observable in RxJs Library in which we can send our data to other components or services.

While Observables are unicast by design. Subjects can multicast. Multicasting basically means that one Observable execution is shared among multiple subscribers.

A Subject is like an Observable but can multicast to many observers which means subject is at the same time an Observable and an Observer. Understanding of Subject

Important points of subjects:

1. A Subject is a Special type of Observable that allows value to be multicasted to many Observers.
2. Subject are like event emitters.
3. No Initial Value allowed

subject =new Subject<datatype>();  

Lets create a basic demo for subject.

1- Create an angular application using below command: ng new subjectDemo   

2- Add three components in app/src using below command: 

ng g c Component1 
ng g c Component2 
ng g c Component3 

3- After that open Component1.component.html file and paste the below code.

<div style="background-color: aliceblue;" class="card">  

    <div class="card-body">  

      <h5 class="card-title">Component 1</h5>  

      <input name="comp1" #comp1 type="text" />  

      <button (click)="onSubmit(comp1)">Submit</button>  

      <p class="card-text">{{Component1Data}}</p>  

    </div>  

</div> 

4- After that open Component1.component.ts file and paste the below code.

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

import { DataSharingService } from '../dataService.service';

@Component({

  selector: 'app-component1',

  templateUrl: './component1.component.html',

  styleUrls: ['./component1.component.scss']

})

export class Component1Component{

  Component1Data: any = '';  

  

  constructor(private DataSharing: DataSharingService) {  

    this.DataSharing.SharingData.subscribe((res: any) => {  

      this.Component1Data = res;  

    })  

  }  

  

  onSubmit(data: { value: any; }) {  

    this.DataSharing.SharingData.next(data.value);  

  }  

}

5- After that open Component2.component.html file and paste the below code.

<div style="background-color:antiquewhite" class="card">  

    <div class="card-body">  

      <h5 class="card-title">Component 2</h5>  

      <input name="comp2" #comp2 type="text" />  

      <button (click)="onSubmit(comp2)">Submit</button>  

      <p class="card-text">{{Component2Data}}</p>  

    </div>  

</div> 

6- After that open Component2.component.ts file and paste the below code.

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

import { DataSharingService } from '../dataService.service';

@Component({

  selector: 'app-component2',

  templateUrl: './component2.component.html',

  styleUrls: ['./component2.component.scss']

})

export class Component2Component{

  Component2Data: any = '';  

  constructor(private DataSharing: DataSharingService) {  

    this.DataSharing.SharingData.subscribe((res: any) => {  

      this.Component2Data = res;  

    })  

  }  

  

  onSubmit(data: { value: any; }) {  

    this.DataSharing.SharingData.next(data.value);  

  }  

}

7- After that open Component3.component.html file and paste the below code.

<div style="background-color:burlywood" class="card">  

    <div class="card-body">  

      <h5 class="card-title">Component 3</h5>  

      <input name="comp3" #comp3 type="text" />  

      <button (click)="onSubmit(comp3)">Submit</button>  

      <p class="card-text">{{Component3Data}}</p>  

    </div>  

</div>

8- After that open Component3.component.ts file and paste the below code.

import { Component, OnInit } from '@angular/core';

import { DataSharingService } from '../dataService.service';

@Component({

  selector: 'app-component3',

  templateUrl: './component3.component.html',

  styleUrls: ['./component3.component.scss']

})

export class Component3Component {

  Component3Data: any = '';  

  

  constructor(private DataSharing: DataSharingService) {  

    this.DataSharing.SharingData.subscribe((res: any) => {  

      this.Component3Data = res;  

    })

  }

  onSubmit(data: { value: any; }) {  

    this.DataSharing.SharingData.next(data.value);  

  } 

}

9- Now in the app.component.html file lets import the components selector using the following command.

<div style="text-align: center; font-size: x-large; font-family: monospace;">Example of Subject in RxJs</div>  

<div style="margin:10px" class="card-deck">  

  <app-component1></app-component1>  

  <app-component2></app-component2>  

  <app-component3></app-component3>  

</div> 

10- Now let's create a service so that one service can transfer data and use the stream of data.

import { Injectable } from '@angular/core';  

import { Subject } from 'rxjs';  

  

@Injectable({  

  providedIn: 'root'  

})  

export class DataSharingService {  

  

  SharingData = new Subject();  

  constructor() { }  

}

11- Now Run the application using ng serve command.

Change data in one component and submit. You will see the output in all component. 

Continue Reading →