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>

@xyz yes, sir. As of now I don't have the owners list to populate the data so for time being i'm using the campaign name as the owner name. — Prudhvi Bharadwaj
– Prudhvi Bharadwaj, Commented Dec 5, 2018 at 6:47
What is the purpose a of having click listener on the anchor i.e. a tag in the owners' section? — Ashish Ranjan
– Ashish Ranjan, Commented Dec 5, 2018 at 6:49
@xyz It just sends an empty list to the filter, so that it acts as a back button to get back to list of all the campaigns. — Prudhvi Bharadwaj
– Prudhvi Bharadwaj, Commented Dec 5, 2018 at 6:54

Prudhvi Bharadwaj · Accepted Answer · 2018-12-05 07:53:47Z

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.

works like a charm. Thank you sir. And yes the filter is based on single selection. As you pointed, how can I clear the owner selected?
depends on how you want it to work, but in theory if you want to clear it by clicking the badge of selected owner you can change: {{selectedOwner}} to: {{selectedOwner}}
I've implemented something like this sir. And it's working: {{selectedOwner}} <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; "> </a>

Ashish Ranjan · Accepted Answer · 2018-12-05 07:36:52Z

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>

@PrudhviBharadwaj: I see, so you want to filter the list by the selected owner name. Just add (click)="selectedOwnerName="" in the a tag instead of filterByOwner()

Collectives™ on Stack Overflow

binding the data from component in HTML page : Angular 6

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related