title: binding the data from component in HTML page : Angular 6
body: <p>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 <strong>Owner Name</strong>. Now I want to display the owner name on the top right corner of my HTML page. How can I achieve that?</p>
  
  <p>Here is how my HTML page looks like.</p>
  
  <p><a href="https://i.stack.imgur.com/1ft4t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ft4t.png" alt="Image"></a>
  My component.ts page looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(() =&gt; {  
        this.Time = Date.now()
      }, 1000);
     
  
      this.campaignService.CampaignsInfo()
      .subscribe(response=&gt;{
        this.show = false;
        this.campaigns = response;
      });
  
    }
  
    filterByOwnr(val){
      if(val != null)
      {
        this.show=true;
      }
      else
      {
        this.show=false;
      }
     
      this.filter = val;
      }
  
    
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and my HTML page looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;campaign-header&gt;&lt;/campaign-header&gt;
  
  &lt;div class="container-fluid date-time sticky-top"&gt;
    &lt;div class="container"&gt;
  
      &lt;div class="d-flex justify-content-end" style="margin-top: -16px;"&gt;
        &lt;span id="date_time"&gt;&lt;i class="zmdi zmdi-calendar-check zmdi-hc-fw"&gt;&lt;/i&gt; {{Time | date}} &amp;nbsp; &lt;i class="zmdi zmdi-time zmdi-hc-fw"&gt;&lt;/i&gt; {{ Time | date:'mediumTime' }} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;!-- content --&gt;
  &lt;div class="container"&gt;
    &lt;h3&gt;Campaigns&lt;/h3&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
  
        &lt;div class="card campaign border-top wrap mt-4"&gt;
          &lt;br&gt;
  
          &lt;div class="card-body table-responsive"&gt;
            &lt;table class="table table-hover mb-0 "&gt;
  
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="border-top-0"&gt;CAMPAIGN &lt;/th&gt;
                  &lt;th class="border-top-0"&gt;STATUS&lt;/th&gt;
                  &lt;th class="border-top-0"&gt;DIALED&lt;/th&gt;
                  &lt;th class="border-top-0"&gt;OWNERS&lt;/th&gt;
                  &lt;th class="border-top-0"&gt; &lt;span class="invisible"&gt;Action&lt;/span&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;!-- &lt;button  mat-button color="primary" routerLink="/campaign-details"&gt;CampaignDetails&lt;/button&gt; --&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
                &lt;tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;"&gt;
                  &lt;td style="max-width:280px"&gt;
                    &lt;p&gt;{{campaign.CampaignName}}&lt;/p&gt;
                    &lt;small&gt;{{campaign.DepartmentName}}&lt;/small&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;small class="text-info"&gt;Active&lt;/small&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;p&gt;{{campaign.Dialed}} / &lt;small&gt;1500000&lt;/small&gt;&lt;/p&gt;
                    &lt;div class="progress mt-2 w-75"&gt;
                      &lt;div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                    &lt;span class="badge badge-pill badge-secondary cursor" (click)="filterByOwnr(campaign.CampaignName)"&gt; {{ campaign.CampaignName }} &amp;nbsp; &amp;nbsp; &lt;/span&gt;
                    &lt;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; "&gt;&lt;i class="zmdi zmdi-close zmdi-hc-fw"&gt;&lt;/i&gt; &lt;/a&gt;
                   
                  &lt;/td&gt;
  
                  &lt;td class="ml-0 pl-0"&gt;
                    &lt;a [routerLink]="['/campaign-details' , campaign.Id]" [queryParams]="{ CampaignName : campaign.CampaignName , SubCampaign : campaign.SubCampaign, DepartmentName : campaign.DepartmentName }"&gt;&lt;img src="../../assets/Images/next.png" class="next" /&gt;&lt;/a&gt;
                    &lt;a (click)="filterByOwnr()" *ngIf=show class="close_icon"&gt;&lt;i class="zmdi zmdi-close zmdi-hc-fw"&gt;&lt;/i&gt; &lt;/a&gt;
                  &lt;/td&gt;
  
                &lt;/tr&gt;
  
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>