default data on page init angular 4

Question

I have a button in view which has a dropdown of different names that I retrieve from backend. I'm showing the first name that I retrieve as default. I have a method in component to get data when they change options in dropdown. I added a click event and that is retrieving data when option is changed in dropdown.

I'm able to get data form getFinalData when I change options in dropdown since I have click event on that. But I want to show the data of first item when the initial page loads. How do I show the data of first name on ngOninit?

component.ts

ngOnInit() {
  this.getFinalData(this.name);
}
getnames() {
  this.http.get("**").subscribe(data => {});
}
getFinalData(name) {
  this.http.get("**" + "/" + name).subscribe(data => {
    console.log(data);
  });
}

html

<button id="selected" type="button" class="btn btn-secondary dropdown-toggle data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{selected}}</button>
  <div class="dropdown-menu arrow form-group">
    <a class="dropdown-item" *ngFor="let data of data" (click)="getFinalData(data?.name)">{{data?.name}}
    </a>
  </div>
</button>

Answer 1

ngOnInit() {
        this.getNames();
      }

getnames() {
    this.http.get('**')
      .subscribe(namesData => {
      if(this.name==""){
        //assume that this.name is "" or null on init.
          this.getFinalData(namesData[0].name)
          .subscribe(nameInfo=>{})
       }
 });

    getFinalData(name) {
              this.http.get('**' + '/' + name)
              .subscribe(data => {
               console.log(data)
            }

   onSelectClick(name:string){
      this.getFinalData(name)
   }