binding the data from component in HTML page : Angular 6

Question

I'm new to angular 6 so please. I have my component.ts where i'm having my response. Now I want to bind data based on filter value in my HTML page. That is when the user clicks on the Owner Name . Now I want to display the owner name on the top right corner of my HTML page. How can I achieve that?

Here is how my HTML page looks like.

My component.ts page looks like this:

 import { CampaignService } from './../../../services/campaign.service'; import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(private campaignService : CampaignService) { } Time :any; campaigns :any; filter; show:boolean = false ; ngOnInit(){ setInterval(() => { this.Time = Date.now() }, 1000); this.campaignService.CampaignsInfo() .subscribe(response=>{ this.show = false; this.campaigns = response; }); } filterByOwnr(val){ if(val != null) { this.show=true; } else { this.show=false; } this.filter = val; } } 

and my HTML page looks like this:

 <campaign-header></campaign-header> <div class="container-fluid date-time sticky-top"> <div class="container"> <div class="d-flex justify-content-end" style="margin-top: -16px;"> <span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} &nbsp; <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span> </div> </div> </div> <br> <!-- content --> <div class="container"> <h3>Campaigns</h3> <div class="clearfix"></div> <div class="row"> <div class="col-sm-12"> <div class="card campaign border-top wrap mt-4"> <br> <div class="card-body table-responsive"> <table class="table table-hover mb-0 "> <thead> <tr> <th class="border-top-0">CAMPAIGN </th> <th class="border-top-0">STATUS</th> <th class="border-top-0">DIALED</th> <th class="border-top-0">OWNERS</th> <th class="border-top-0"> <span class="invisible">Action</span></th> <th></th> <!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> --> </tr> </thead> <tbody> <tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;"> <td style="max-width:280px"> <p>{{campaign.CampaignName}}</p> <small>{{campaign.DepartmentName}}</small> </td> <td> <small class="text-info">Active</small> </td> <td> <p>{{campaign.Dialed}} / <small>1500000</small></p> <div class="progress mt-2 w-75"> <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> </td> <td> <span class="badge badge-pill badge-secondary cursor" (click)="filterByOwnr(campaign.CampaignName)"> {{ campaign.CampaignName }} &nbsp; &nbsp; </span> <a (click)="filterByOwnr()" *ngIf=show style="position: relative; left: -16px; top: -1px; color: #fff; font-size: 8px; border: 1px solid #fff; border-radius: 15px; font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a> </td> <td class="ml-0 pl-0"> <a [routerLink]="['/campaign-details' , campaign.Id]" [queryParams]="{ CampaignName : campaign.CampaignName , SubCampaign : campaign.SubCampaign, DepartmentName : campaign.DepartmentName }"><img src="../../assets/Images/next.png" class="next" /></a> <a (click)="filterByOwnr()" *ngIf=show class="close_icon"><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div> </div> <br> </div> 

Answer 1

 import { CampaignService } from './../../../services/campaign.service'; import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(private campaignService : CampaignService) { } Time :any; campaigns :any; filter; show:boolean = false ; selectedOwner:string; ngOnInit(){ setInterval(() => { this.Time = Date.now() }, 1000); this.campaignService.CampaignsInfo() .subscribe(response=>{ this.show = false; this.campaigns = response; }); } filterByOwnr(val){ if(val != null) { this.selectedOwner = val; this.show=true; } else { this.show=false; } this.filter = val; } } 

 <campaign-header></campaign-header> <div class="container-fluid date-time sticky-top"> <div class="container"> <div class="d-flex justify-content-end" style="margin-top: -16px;"> <span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} &nbsp; <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span> </div> </div> </div> <br> <!-- content --> <div class="container"> <h3>Campaigns</h3> <div class="clearfix"></div> <div class="row"> <div class="col-sm-12"> <div class="card campaign border-top wrap mt-4"> <br> <div class="card-body table-responsive"> <span class="badge badge-pill badge-secondary" *ngIf="selectedOwner && show"> {{selectedOwner}} &nbsp; &nbsp; </span> <a (click)="filterByOwnr()" *ngIf=show style="position: relative; left: -16px; top: -1px; color: #fff; font-size: 8px; border: 1px solid #fff; border-radius: 15px; font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a>{{selectedOwner}}</span> <table class="table table-hover mb-0 "> <thead> <tr> <th class="border-top-0">CAMPAIGN </th> <th class="border-top-0">STATUS</th> <th class="border-top-0">DIALED</th> <th class="border-top-0">OWNERS</th> <th class="border-top-0"> <span class="invisible">Action</span></th> <th></th> <!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> --> </tr> </thead> <tbody> <tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;"> <td style="max-width:280px"> <p>{{campaign.CampaignName}}</p> <small>{{campaign.DepartmentName}}</small> </td> <td> <small class="text-info">Active</small> </td> <td> <p>{{campaign.Dialed}} / <small>1500000</small></p> <div class="progress mt-2 w-75"> <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> </td> <td> <span class="badge badge-pill badge-secondary cursor" (click)="filterByOwnr(campaign.CampaignName)"> {{ campaign.CampaignName }} &nbsp; &nbsp; </span> <a (click)="filterByOwnr()" *ngIf=show style="position: relative; left: -16px; top: -1px; color: #fff; font-size: 8px; border: 1px solid #fff; border-radius: 15px; font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a> </td> <td class="ml-0 pl-0"> <a [routerLink]="['/campaign-details' , campaign.Id]" [queryParams]="{ CampaignName : campaign.CampaignName , SubCampaign : campaign.SubCampaign, DepartmentName : campaign.DepartmentName }"><img src="../../assets/Images/next.png" class="next" /></a> <a (click)="filterByOwnr()" *ngIf=show class="close_icon"><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div> </div> <br> </div> 

Here I am assuming you can only filter on one owner at a time, from the code that is what it looks like. If you can filter on multiple you would obviously have to store the selected in an array. Also not sure where you would be clearing the owner, but wherever you do that you then also would want to clear the selected owner string or array.

Answer 2

Initialize a class property which hold the selected owner name

public selectedOwnerName: string = '';

Make the owner's section as

<td>
    <span class="badge badge-pill badge-secondary cursor" (click)="selectedOwnerName = campaign?.CampaignName"> {{ campaign?.CampaignName }} &nbsp; &nbsp;
      <a *ngIf="selectedOwnerName == campaign?.CampaignName" style="position: relative;  left: -16px;   top: -1px;  color: #fff;  font-size: 8px; border: 1px solid #fff;     border-radius: 15px;     font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a>
    </span>
</td>

No need to use a filterByOwnr() method to set values, you can set the value to the class property directly on the click. Use the class property {{selectedOwnerName}} (find the appropriate place to place this elem) in your HTML to display the selected owner.

As far as displaying anchor is concerned, you can use a check in the anchor tag to see if the selectedOwnerName matches with the owner name in the current for block.

Update

If you want to reset the list on click of anchor then you might want to stop the event propagation so that the event doesn't bubble up to span again.

 <td>
    <span class="badge badge-pill badge-secondary cursor" (click)="selectedOwnerName = campaign?.CampaignName"> {{ campaign?.CampaignName }} &nbsp; &nbsp;</span>
    <a *ngIf="selectedOwnerName == campaign?.CampaignName" (click)="selectedOwnerName=""; $event.stopPropagation()" style="position: relative;  left: -16px;   top: -1px;  color: #fff;  font-size: 8px; border: 1px solid #fff;     border-radius: 15px;     font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a>
</td>