How can I display different components with a different specified amount of time?

Question

I have two different Angular 7 components named ProductComponent and MemberComponent and I want to show them with different amount of time. For example, I scanned a barcode and that barcode is a member, then it will show the MemberComponent for 10 seconds, while if I scanned a product barcode it will show the ProductComponent for 30 seconds. How can I do this?

I've already tried to use the function setTimeout on both components, specifying the interval but it seems like it affects the other components.

When I scan a member barcode and scan a product barcode, ProductComponent shows only for 10 seconds and not 30 seconds.

Here's my code for member.component.ts

ngOnInit() {
  this.route.params.subscribe(params => {
    this.barcode = params['id'];

    this.loadMember();

    setTimeout(() => {
      this.router.navigate(['']);
    }, 10000); // I wan't to display this component for 10 seconds
  });
}

and here's my code for product.component.ts

ngOnInit() {
  this.route.data.subscribe(result => {
    this._json = result.json;
  });

  if (this._json == null) {
    this.route.params.subscribe(params => {
      this.barcode = params['id'];

      if ( this.barcode === '' ) {
        return;
      } else {
        this.loadProduct();

        setTimeout(() => {
          this.router.navigate(['']);
        }, 30000); // I wan't to display this component for 30 seconds
      }
  });
}

Answer 1

Below is a working example to show/hide using ngIf

1. Create Project

ng new project --routing

ng g c barcode

ng g c member

ng g c product

2. Add route with params

In app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BarcodeComponent } from './barcode/barcode.component';

const routes: Routes = [
  { path: 'barcode/:type/:id', component: BarcodeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. Add Product and Member component to Barcode component with ngIf

In barcode.component.html

<app-product *ngIf="scanType == 'product'"></app-product>
<app-member *ngIf="scanType == 'member'"></app-member>

In barcode.component.ts

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

@Component({
  selector: 'app-barcode',
  templateUrl: './barcode.component.html',
  styleUrls: ['./barcode.component.scss']
})
export class BarcodeComponent implements OnInit {

  scanType: string = ""

  constructor(
    private route: ActivatedRoute
  ) {
    this.route.params.subscribe(params => {
      this.scanType = params['type'] || ''
      let time = (params['type'] == "member") ? 10000 : 30000
      setTimeout(()=> {
        this.scanType = ""
      }, time)
    })
  }

  ngOnInit() {
  }
}

4. Testing

And you could try navigate to

/barcode/member/uid

or

/barcode/product/pid