Uncaught (in promise): TypeError: can't access property "value" in ionic segment

Issue

I have an Ionic segment

<ion-segment scrollable mode="md" color="primary" (ionChange)="cambioCategoria( $event )">

    <ion-segment-button mode="md" *ngFor="let categoria of categorias" [value]="categoria">
        <ion-label text-capitalize>{{ categoria }}</ion-label>
    </ion-segment-button>


</ion-segment>
import { Component, ViewChild, OnInit } from '@angular/core';
import { IonSegment } from '@ionic/angular';
import { NoticiasService } from '../../services/noticias.service';
import {  Article } from '../../interfaces/interfaces';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

  @ViewChild(IonSegment) segment: IonSegment;

  categorias = ['business', 'entertainment', 'general', 'health', 'science', 'sports', 'technology', ];

  noticias: Article[] = [];            

  constructor(private NoticiasService: NoticiasService) {} 

  ngOnInit()
  {
    console.log(this.categorias[0]);
    this.segment.value = this.categorias[0];
  
  }     

and I get this error: ERROR Error: Uncaught (in promise): TypeError: can't access property "value", this.segment is undefined

categorias[0] = business in the console.log categorias[0] is 'business' so I dont underestand why I am getting this error.

the error is here = this.segment.value = this.categorias[0];

Solution

Any Ionic component will initialize after the view is rendering. ngOnInit is triggering before the view is initialized.

place your code in

ionViewDidEnter() {
   console.log(this.categorias[0]);
   this.segment.value = this.categorias[0];
}

Answered By - Patrick Ciseran