CODEWITHSUNDEEP
angular
Pierre-Antoine Schoemans
Pierre-Antoine Schoemans

Reputation: 23

Angular select change refresh a component

I have a angular 7 component that display some locations in a . Then depending on the selected value, a nested component (a calendar) is created. I just want that the change event no the select refresh the nested component. It's good on loading.

I'm new with and I should miss something in my angular course but I don't understand what.

Here is my code:

    <select class="sites" [(ngModel)]="selectedSite" (ngModelChange)="onChangeSite($event)">
        <option *ngFor='let site of data.sites' [ngValue]='site.id'>{{ site.name }}</option>
    </select>

<app-weeklycalendar [calendar]='selectedSite'></app-weeklycalendar>

I think I should add something in the app-weeklycalendar but I don't know what

The .ts

export class SiteCalendarComponent implements OnInit {
    ready: Promise<boolean>;
    private data = {};
    private selectedSite = 1;
    private calendar = {};

  constructor(private App:AppService, private Route: ActivatedRoute) { }

  ngOnInit() {
    this.App.get("sites/activesites").subscribe(
      result => {
        this.data = result;
        this.ready = Promise.resolve(true);
    })
  }

  onChangeSite(siteId) {
    this.selectedSite = siteId;
    console.log(this.selectedSite);
  }
}

Thanks for your reply. And if you could add an explanation this will help me.

Upvotes: 2

Views: 5593

Answers (1)

GonzaH
GonzaH

Reputation: 347

One approach of @Input() property changes detection could be:

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

@Component({
    selector: 'app-weekly-calendar',
    template: `Your code`
})

export class WeeklycalendarComponent implements OnInit {

    private _calendar: number;

    @Input() set calendar(value: number) {
        this._calendar = value;
        // Refresh the calendar when a value changes        
    };

    get calendar(): number {
        return this._calendar;
    }

    constructor() { }

    ngOnInit() { }
}

Useful resource:

Upvotes: 1

Related Questions