title: Get inner text from angular component selector
body: <p>I am building an Angular message component:</p>
  
  <pre><code>&lt;app-info-card&gt;
    my message here
  &lt;/app-info-card&gt;
  </code></pre>
  
  <p>Here's my component:</p>
  
  <pre><code>import {AfterViewInit, Component, ContentChild, ElementRef, Input, OnInit} from '@angular/core';
  
  @Component({
    selector: 'app-info-card',
    templateUrl: './info-card.component.html',
    styleUrls: ['./info-card.component.css']
  })
  export class InfoCardComponent implements OnInit, AfterViewInit {
  
    @ContentChild('app-info-card') messageRef: ElementRef;
    message: string;
  
    constructor() {
    }
  
    ngOnInit() {
    }
  
    ngAfterViewInit() {
  
      this.message = this.messageRef.nativeElement.innerHTML;
      console.log(this.messageRef.nativeElement.innerHTML);
  
    }
  
  }
  </code></pre>
  
  <p>This gives me an error that messageRef is undefined. I'm trying to get the inner text from the component selector "my message here" into the message field of the component. Is there a way I can do this without adding attributes? </p>