CODEWITHSUNDEEP
angular
Baruch_Mashasha
Baruch_Mashasha

Reputation: 207

Make a condition on header that have a button (Disable/Show the button) [Angular]

I have a header in my project. The header includes a button inside it. Now I have a new component and a new module in my project and I want to use the same header but without the button. How can I do this?

My Header HTML

<header>
    <div class="container">
        <button mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before">+</button>
        <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
            <app-reports-list></app-reports-list>
        </mde-popover>
    </div>
</header>

In my original component:

<app-header></app-header>
<main>
    <app-reports></app-reports>
</main>
<app-footer></app-footer>

And in my new component (here I want it without the button just the header)

<app-header></app-header>
<main>
    <app-kit-process></app-kit-process>
</main>
<app-footer></app-footer>

Thanks and have a good coding day :)

Upvotes: 2

Views: 946

Answers (3)

Baruch_Mashasha
Baruch_Mashasha

Reputation: 207

I found an easy solution:

I have added a router to my header ts file

constructor(private _router: Router) {}

Then i my header html make a condition

<header>
  <div class="container">
    <button *ngIf="_router.url != '/kit'" mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before">+</button>
    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
      <app-reports-list></app-reports-list>
    </mde-popover>
  </div>
</header>

Upvotes: 1

sudhir
sudhir

Reputation: 1437

Instead using a service to just enable/disable component elements, simple solution can be using input variables.

In your app header component, just have a input variable like 'isApproverAdd' and pass the input from individual components:

app-header.component.ts:

import { Component, OnInit, Input} from '@angular/core';
@Component( {
    selector: 'app-header',
    templateUrl: './app-header.html'
} )
export class AppHeader {
@Input() isApproverAdd : boolean;

    constructor( ){}
    ngOnInit() {

      }
}

app-header.component.html

<header>
  <div class="container">
    <button mat-fab class="mat-success" *ngIf="isApproverAdd" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before">+</button>
    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
      <app-reports-list></app-reports-list>
    </mde-popover>
  </div>
</header>

Original Component:

<app-header [isApproverAdd]="true" ></app-header>
<main>
    <app-reports></app-reports>
</main>
<app-footer></app-footer>

New Component:

<app-header [isApproverAdd]="false" ></app-header>
    <main>
        <app-reports></app-reports>
    </main>
    <app-footer></app-footer>

Upvotes: 0

Shafeeq Mohammed
Shafeeq Mohammed

Reputation: 1298

you can put a variable that can use globally in a Service and use the same to disable and enable the button. that is when you want to disable the button you can make the variable 'true' in ngOninit of that component.

Sample code service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class dataService {
 showbutton: boolean = true;}

sample code component_1.ts

import { Component, OnInit} from '@angular/core';
import { dataService } from '../service/data.service';
@Component( {
    selector: 'app-component_1',
    templateUrl: './component_1.component.html',
    styleUrls: ['./component_1.component.css']
} )
export class component_1 {
    constructor( public bookmarkRoot: dataService, private router: Router){}
    ngOnInit() {
       this.bookmarkRoot.showbutton=false  //hide/disable button
      }
}

sample code component_2.ts

import { Component, OnInit } from '@angular/core';
import { dataService } from '../service/data.service';
@Component( {
    selector: 'app-component_2',
    templateUrl: './component_2.component.html',
    styleUrls: ['./component_2.component.css']
} )
export class component_2 {
    constructor( public bookmarkRoot: dataService, private router: Router){}
    ngOnInit() {
       this.bookmarkRoot.showbutton=true//hide/disable button
      }
}

header HTML

<header>
  <div class="container">
    <button mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before" [disable]="bookmarkRoot.showbutton">+</button>
    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
      <app-reports-list></app-reports-list>
    </mde-popover>
  </div>
</header>

you have to import dataservice in header.component also. you can find how to use service to communicate between component from stackover flow only

Upvotes: 1

Related Questions