title: Angular - Load component using ngOnInit
body: <p>For the life of me, I cannot figure out how to get one of my components to load when the page loads.</p>
  
  <p>Here is what I got:</p>
  
  <p>activity.page.ts:</p>
  
  <pre><code>export class ActivityPage implements OnInit {
  
    page = "friends"; // page is the ngModel name
  
    friends: Friends[];
    selectedFriends: Friends;  
  
    nearme: Nearme[];
    selectedNearme: Nearme;
  
    constructor(private friendService: FriendsService, private nearmeService: 
     NearmeService) { 
    }
  
    ngOnInit() {
      this.friends = this.friendService.getFriends();
      this.nearme = this.nearmeService.getNearme();
      console.log(this.friends);
    }
  
    selectFriends(friends: Friends): void {
      this.selectedFriends = friends;
      this.selectedNearme = null;
      console.log(friends);
    }
  
    selectNearme(nearme: Nearme): void {
      this.selectedNearme = nearme;
      this.selectedFriends = null;
    }
  
    segmentChanged(ev: any) {
      console.log('Segment changed', ev);
    }
  
  }
  </code></pre>
  
  <p>activity.page.html:</p>
  
  <pre><code>&lt;ion-segment-button class="tab-label" value="friends" (click)="selectFriends(friends)" margin-start&gt;
      Friends
  &lt;/ion-segment-button&gt;
  &lt;ion-segment-button class="tab-label" value="near_me" (click)="selectNearme(nearme)"&gt;
      Near Me
  &lt;/ion-segment-button&gt;
  &lt;app-friends *ngIf="selectedFriends" [friends]="selectedFriends"&gt;&lt;/app-friends&gt;
  &lt;app-nearme *ngIf="selectedNearme" [nearme]="selectedNearme"&gt;&lt;/app-nearme&gt;
  </code></pre>
  
  <p>friends.service.ts:</p>
  
  <pre><code>@Injectable()
  export class FriendsService {
    private friends: Friends[] = [];
  
    constructor(
      private backend: BackendService,
      private logger: Logger
    ) { }
  
    getFriends() {
      this.backend.getAll(Friends).then( (friends: Friends[]) =&gt; {
        this.logger.log(`Fetched ${friends.length} friends.`);
        this.friends.push(...friends); // fill cache
      });
      return this.friends;
    }
  }
  </code></pre>
  
  <p>backend.service.ts:</p>
  
  <pre><code>@Injectable()
  export class BackendService {
    constructor(private logger: Logger) {}
  
    getAll(type: Type&lt;any&gt;): PromiseLike&lt;any[]&gt; {
      if (type === Friends) {
        // TODO: get from the database
        return Promise.resolve&lt;Friends[]&gt;(FRIENDS);
      }
      if (type === Nearme) {
        // TODO: get from the database
        return Promise.resolve&lt;Nearme[]&gt;(NEARME);
      }
      let err = new Error('Cannot get object of this type');
      this.logger.error(err);
      throw err;
    }
  }
  </code></pre>
  
  <p>When the page loads the content is empty. I need to click on the segment button to the load the component HTML. I want the <code>app-friends</code> component to show on page load.</p>
  
  <p>I am not sure what I'm doing wrong.</p>
  
  <p>I have tried the answers below and they do not work 100%.</p>
  
  <p>Can someone please help me figure this out?</p>