CODEWITHSUNDEEP
angularjstypescriptangularangular2-servicesangular2-changedetection
Zero
Zero

Reputation: 194

Angular2 dont fire changeDetection after click

Angular2 doesn't trigger the ChangeDetection after a click event. The code snippets below are to get the data from one component to another.

onClickEvent

 (click)="$event.preventDefault(); setApartmentObject(FlatObject)";

ApartmentOverviewComponent

constructor(private _apart:ApartmentService) {}

setApartmentObject(flat:ApartmentObject) {
    this._apart.setApartmentDetails(flat);
}

ApartmentService

Injectable()
export class ApartmentService {

  apartmentDetails:ApartmentObject

  getApartmentDetails():Observable<ApartmentObject> {
      return Observable.create((observer) => {
          observer.next(this.apartmentDetails);
          observer.complete();
      });
  }

  setApartmentDetails(value:ApartmentObject) {
      this.apartmentDetails = value;
  }
}

ApartmentDetailComponent

constructor(private _apart:ApartmentService)

get apartmentDetails() {
    this._apart.getApartmentDetails().subscribe(data => {
        this._apartmentDetails = data;
    });
    return this._apartmentDetails;
}

In the HTML file

 <p><strong>{{apartmentDetails.name || 'Musterwohnung'}}</strong></p>

I also tried to fix this problem with an eventemitter, but without success. Only the following dirty fix works:

constructor(private _ref:ChangeDetectorRef) {
  this._ref.detach();
  setInterval(() => {
     this._ref.detectChanges();
  }, 300);
}

Upvotes: 0

Views: 111

Answers (1)

Mateusz Kocz
Mateusz Kocz

Reputation: 4602

There are some issues with your code that actually prevent the value from being read.

First of all—in your service—when you set the value, you just do it on the service's instance, instead of feeding it to the observable object. The observable just can't know that value has changed, so it won't emit the change (next) event. This is why the ApartmentOverviewComponent. setApartmentObject() does nothing. To actually feed the observable with data, you need to use a Subject.

In the ApartmentDetailComponent, in this simple scenario (where data is always synchronously provided), you could get the value in the way you try it. But, as mentioned before, the data won't ever change. It's also needles to store the data on the component's instance's _apartmentDetails field. You could use the observable in your template.

The working implementation is like that:

@Injectable()
class ApartmentService {
  // BehaviorSubject is a type of an Observable that can be manually fed with data
  // and returns it's last value to any subscriber.
  apartmentDetails = new BehaviorSubject<ApartmentObject>({name: 'Musterwohnung'});

  // Instead of using a property of the service, just inform the
  // subject about knew data and let it spread the change for you.
  setApartmentDetails(value: ApartmentObject) {
    this.apartmentDetails.next(value);
  }
}

@Component({
  selector: 'overview-cmp',
  // Side note: you don't need to .preventDefault() here.
  template: `<a (click)="setApartmentObject({name: 'Shiny Aparament'})">click</a>`
})
class ApartmentOverviewComponent {
  constructor(private apartService: ApartmentService) {}

  // Works same as before.
  setApartmentObject(flat: ApartmentObject) {
    this.apartService.setApartmentDetails(flat);
  }
}

@Component({
  selector: 'details-cmp',
  // Use the 'async' pipe to access the data stored in an Observable
  // object. Also, to secure the code, use '?' to safely access the property.
  template: `<p><strong>{{(details | async)?.name}}</strong></p>`
})
class Apartament {
  // This is the observable with data.
  details: Observable<ApartmentObject>;

  constructor(private apartService: ApartmentService) {}

  // When component initialises, assign the observable data from the service
  ngOnInit() {
    this.details = this.apartService.apartmentDetails;
  }
}

Upvotes: 2

Related Questions