Binding not working for innerHTML in nested component

Question

I'm trying to come up with a custom select control,

<my-select>
   <my-option>Option 1</my-option>
   <my-option>Option 2</my-option>
   ...
</my-select>

which works alright with static text. However, if I introduce bindings

<my-select>
   <my-option *ngFor="let option of options">{{option}}</my-option>
</my-select>

{{option}} always renders as empty string (if I replace {{option}} with, say test then everything is working again). Here are my components:

@Component({
  selector: 'my-select',
  template: `
    <ul>
      <li *ngFor="let option of options">
        {{option.text}}
      </li>
    </ul>
  `
})
export class SelectComponent {
  options: OptionComponent[] = [];
  addOption(option): OptionComponent {
    this.options.push(option);
  }
}

@Component({
  selector: 'my-option',
  template: `
    <div #wrapper>
      <ng-content></ng-content>
    </div>
  `,
  directives: []
})
export class OptionComponent implements AfterContentInit {
  @ViewChild('wrapper') wrapper: ElementRef;
  text: string;
  constructor(private select: SelectComponent) { }
  ngAfterContentInit() {
      let text = this.wrapper.nativeElement.innerHTML;
      this.text = text ? text : 'EMPTY';
      this.select.addOption(this);
  }
}

How can I get this to work?

EDIT: Almost forgot, here's a plnkr showing the problem.

Poul Kruijt · Accepted Answer · 2016-07-15 08:00:45Z

3

You have to use ngAfterViewInit instead of ngAfterContentInit in your OptionComponent before the binding of the view, {{option}}, is done.

export class OptionComponent implements AfterViewInit {
  @ViewChild('wrapper') 
  wrapper: ElementRef;
  text: string;
  constructor(private select: SelectComponent) { }
  ngAfterViewInit() {
      let text = this.wrapper.nativeElement.innerHTML;
      this.text = text ? text : 'EMPTY';
      this.select.addOption(this);
  }
}

plunker

it's pretty frowned upon to use the nativeElement property, A better thing I guess, would be to use @Input() on the OptionComponent, but that's beyond the scope of your question ;)

edited Jul 15, 2016 at 8:00

answered Jul 15, 2016 at 7:55

Poul Kruijt

72.3k12 gold badges153 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thorsten Westheider Over a year ago

I'd like <my-option> to behave like the native <option>, for @Input() a user of this component has to know that they need to write <my-option text="foo"></my-option> instead of <my-option>foo</my-option>

Poul Kruijt Over a year ago

@ThorstenWestheider Sounds reasonable indeed :)

Poul Kruijt Over a year ago

@ThorstenWestheider I tried to remove the nativeElement, but I failed.. I did however came up with a pretty solution for your select -> option thingy :) http://plnkr.co/edit/FupYOwHwa9K7jvmGskFJ?p=preview

Collectives™ on Stack Overflow

Binding not working for innerHTML in nested component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related