Pass value to component to toggle *ngIf

Question

first of all: Sorry for my bad english, its not my native language.

To my Problem: I have a home.ts and a child-component newsslider.ts. When a function is called in my newsslider, im hiding the block via ngif and when the call has finished its visible again.

But if i call that function from the home the refreshing works perfectly but its not hiding.

Here is my Code: Home.html

 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="chevron-down-circle-outline"
            color="primary"
            pullingText="Ziehen zum Neuladen"
            refreshingSpinner="circles"
            refreshingText="Aktualisiere Daten">

    </ion-refresher-content>
</ion-refresher>

Home.ts

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

    constructor(
        public newsslider: NewssliderComponent
    ) {
    }



    doRefresh(event) {
        this.newsslider.getApiNews().then((data:any) => {

        })

        setTimeout(() => {
            event.target.complete();
        }, 2000);
    }

Newsslider.ts

@Component({
    selector: 'app-newsslider',
    templateUrl: './newsslider.component.html',
    styleUrls: ['./newsslider.component.scss'],
})
export class NewssliderComponent implements OnInit {
    public data:boolean = false;
    public sliderItems:any;
    public locations:any;

 

    constructor(
        public router: Router,
        public HttpService: HttpService,
        public locationpage: LocationPage,
        public ngZone: NgZone,
        public events: EventsService,
    ) {
    }

 

    getApiNews() {
        return new Promise(resolve => {
            this.data = false;
            this.ngZone.run(() => {
                console.log("executed");
                this.data = false;
                this.FavoriteLocationIdToString().then((string:string) => {
                    let baseApi = 'XXXXX';
                    let ApiCall = baseApi.concat(string);
                    this.HttpService.get(ApiCall).then((data: any) => {
                        this.sliderItems = JSON.parse(data.data)
                        this.data = true;
                        resolve(this.sliderItems);
                    }, error => {

                    });
                });
            });
        })
    }

newsslider.html

<div *ngIf="data" class="aktuell__content">

            <ion-slides class="aktuell-slider" pager="true"
                        [options]="slideOpts">
                <ion-slide *ngFor="let item of sliderItems; let i = index">
                    <div class="aktuell-slider__item">
                        <span>{{item.date * 1000 | date:'dd.MM.yyyy HH:mm'}} Uhr</span>

                        <h3>{{item.title}}</h3>

                        <p>{{item.formatedBodyHtml | striphtml | slice:0:120}}...</p>

                        <a [routerLink]="['/browser', item.detailPageUrl]"
                           href="#" class="more">
                            weiterlesen
                        </a>

                        <ul class="btn-list">
                            <li *ngIf="item.topNews == 1" class="btn-list__item btn-list__item--highlighted">
                                <span>top</span>
                            </li>
                            <ng-container *ngIf="item.sites.length <= 3">
                                <li *ngFor="let site of item.sites" class="btn-list__item">

                                    <span>{{site.title}}</span>

                                </li>
                            </ng-container>
                

    </ul>


                </div>
            </ion-slide>
        </ion-slides>


    </div>
    <div *ngIf="!data" class="aktuell__content">
        <div class="ion-padding custom-skeleton">
            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            <ion-skeleton-text animated></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </div>
    </div>

The console.log in newsslider.ts says, that this.data is changed from true to false to true, which is completly fine. But in the frontend-view i cant see it.

As a workaround i created an event which triggers the function, but i dont think, this is the correct way.

I hope you guys can help me out here. Feel free to ask questions.

Thanks

Answer 1

You could use @Input on the child component, pass the value for data from the parent component. Set the initial value on the parent component to false, then use @Output to emmit events to set the value in the parent component to whatever value it needs to have.

<parent-component>
  <child-component [data]="data" (dataChanged)="changeData($event)"></child-component>
</parent-component>

Your Home would define

data = false;

changeData(event){
  this.data = event
}

And the Newslider

@Input() data

@Output() dataChanged = new EventEmmiter<boolean>()

And when you want to change the value of data in the parent component

this.dataChanged.emit(true)
or
this.dataChanged.emit(false)

Here's more about Inputs and Outputs https://angular.io/guide/inputs-outputs