Angular 2 transition, directory content in "alt"

Question

I have a simple question here, and still can't find a solution ... So, here is my logo.components.ts:

import {Component} from '../../../../frameworks/core/index';

@Component({
  moduleId: module.id,
  selector: 'my-logo',
  templateUrl: 'logo.component.html',
  styleUrls: ['logo.component.css']
})
export class LogoComponent  {}

So, I import it into my home.component.ts:

import {LogoComponent} from '../../frameworks/mysite/components/logo/logo.component';

<my-logo>AltText</my-logo>

So my logo.component.html template is as follows:

<div class="logo-icon">
  <img alt="" src="../../images/logo-icon.svg" />
</div>

So, I would like my

<my-logo>AltText... or any content text from here.... </my-logo>

prescriptive content inserted in my logo .component.html, <img alt="INSERTED HERE" src="../../images/logo-icon.svg" />.

I know about

<ng-content></ng-content>

But in this case, I don’t know how to insert in the "alt" correctly ... Thank you in advance for your help!

Answer 1

You cannot go into an attribute, only for children elements.

You can pass the value as an attribute

<my-logo alt="AltText"></my-logo>

In your component

@Component({
  template: `
<div class="logo-icon">
  <img [alt]="alt" src="../../images/logo-icon.svg" />
</div>
`
})
export class MyLogo {
  @Input() alt:string;
}

transclude, <ng-content>, DOM , <img [alt]="...">, .

-

<div class="logo-icon">
  <div #wrapper hidden="true"><ng-content></ng-content><div>
  <img [alt]="alt" src="../../images/logo-icon.svg" />
</div>

export class LogoComponent  {
  @ViewChild('wrapper') content:ElementRef; 

  ngAfterViewInitInit():any {
    this.alt = this.content.nativeElement.innerHTML;
  }
}