Q:

How to load child components on click of a button angular 4

Please help needed. I was trying to load child components in parent component on click of a button in parent component. 
Suggestion needed please. I gave just a got it working but I am really willing to know is it the appropriate way for doing it. The implementation is as follows:
<div class="btn-group" role="group">
      <button type="button" id="stars" class="btn btn-primary" data-toggle="tab" (click)="clickStars()"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        <div class="hidden-xs">Stars</div>
      </button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" id="favorites" class="btn btn-default" data-toggle="tab" (click)="clickFavorite()"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
        <div class="hidden-xs">Favorites</div>
      </button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" id="following" class="btn btn-default" data-toggle="tab" (click) = "clickFollowings()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        <div class="hidden-xs">Following</div>
      </button>
    </div>
  </div>
  <div class="well">
    <div class="tab-content">
      <app-stars *ngIf="!starsHidden"></app-stars>
      <app-favorites *ngIf="!favoriteHidden"></app-favorites>
      <app-followings *ngIf="!followingsHidden"></app-followings>
    </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

    starsHidden:boolean;
    favoriteHidden:boolean;
    followingsHidden:boolean

  constructor() { }

  ngOnInit() {
    this.starsHidden = false;
    this.favoriteHidden = true;
    this.followingsHidden = true;
  }

  clickStars(){
    this.starsHidden = false;
    this.favoriteHidden = true;
    this.followingsHidden = true;
  }

  clickFavorite(){
    this.starsHidden = true;
    this.favoriteHidden = false;
    this.followingsHidden = true;
  }

  clickFollowings(){
    this.starsHidden = true;
    this.favoriteHidden = true;
    this.followingsHidden = false;
  }

}

A:

Yes, that's fine, but all those variables and methods seem like a nightmare. Why not just work with a string, for instance: 
activeTab: 'STARS' | 'FAVORITES' | 'FOLLOWINGS';

onChangeTab(tab: string){
    this.activeTab = tab;
}

And you'd change your template to something similar to this:
<button (click)="onChangeTab('STARS')">Stars</button>

This would be fine, but it'd be even better if you made your own TabsComponent which would manage all that logic, and you could easily reuse it whereever you wanted.

