Detect ng-content changes

🚀 feature request

Relevant Package

This feature request is for @angular/core

Description

Add the ability to detect “ng-content” changes into OnChanges method like @Input.

Describe the solution you’d like

SimpleChanges can be expose a special prop. ngContent that contains the old and the new value of ng-content, eg.:

@Component({selector: 'my-cmp', template: `<ng-content></ng-content>`})
class MyComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes.ngContent);
  }
}

Describe alternatives you’ve considered

Add a new lifecycle hook that is called when ng-content change, eg.:

@Component({selector: 'my-cmp', template: `<ng-content></ng-content>`})
class MyComponent implements OnNgContentChanges {
  ngOnNgContentChanges() {
    console.log('ng-content change!');
  }
}

[ALEXOTANO]

Done, the thing is to inject ContentObserver, create an observable using it and subscribe to it.

Using above example:

@Component({
  selector: 'my-selector',
  template: `<div class="wraper" #element>
                       <ng-content></ng-content>
                   </div>`,
  styleUrls: ['./my-selector.component.css']
})
export class my-selectorComponent implements AfterViewInit, OnDestroy {

  @ViewChild('element') element: ElementRef;
  dataChanges:Subscription = null;

  constructor(
    private obs: ContentObserver
  ) { }
  ngAfterViewInit() {

    this.dataChanges = this.obs.observe(this.element.nativeElement)
                                    .subscribe((event: MutationRecord[]) => {
      console.log('Change Detected.', event);

    });
    this.started = true;
  }
  ngOnDestroy(){
    this.dataChanges.unsubscribe();
  }
}

This is the way to do it since 6+, hope helps some one that comes around in future.

[cesco69]

Add the ability to detect “ng-content” changes

Would you care to elaborate on the practical use-case you are trying to solve with this new feature?

@pkozlowski-opensource i have made a wysiwyg editor component that allow the live edit of the content of ng-content and i need to detect changes.

Now, the work-around is a bit tricky:

import { AfterContentChecked, AfterContentInit, Component, ElementRef, EventEmitter, Output, ViewChild } from "@angular/core";

@Component({
    selector: "my-comp",
    template: "<div #content><ng-content></ng-content></div>",
})
export class MyComponent implements AfterContentInit, AfterContentChecked {    
    @ViewChild("content") contentWrapper: ElementRef;
    content = "";
    @Output() public readonly contentChanged = new EventEmitter<string>();

    ngAfterContentInit(): void {
        this.content = this.contentWrapper.nativeElement.innerHTML;
        this.contentChanged.emit(this.content);
    }
    ngAfterContentChecked(): void {
        const c = this.contentWrapper.nativeElement.innerHTML;
        if (c !== this.content) {
            this.content = c;
            this.contentChanged.emit(this.content);
        }
    }
}

demo https://stackblitz.com/edit/angular-lxfzfw