CODEWITHSUNDEEP
javascripthtmlcssangular
Matvey Nevazhno
Matvey Nevazhno

Reputation: 77

Angular 2 transclusion, directive content into "alt"

I have a simple question here, and yet 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'm importing it in my home.component.ts :

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

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

So my template logo.component.html looks like this: 

<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>

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

I know about the 

<ng-content></ng-content>

But in this case i don't know the proper way to insert in into "alt"... Thanks in advance for your help!

Upvotes: 4

Views: 2792

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657318

You can't transclude into an attribute, only to elements children.

You can pass the value as 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;
}

If you still want to use transclude, you can transclude it using <ng-content>, the read the transcluded content from the DOM and assign it to a property you bind <img [alt]="..."> to but that's quite cumbersome.

Update - using transclusion

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

get the transcluded content

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

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

Upvotes: 2

Related Questions