Angular 6 - How to read angular specific attributes

Question

I have a component on which I specify the angular i18in attribute like this:

<app-text i18n="meaning|description"> DeveloperText</app-text>

I want to be able to read this property. I have tried using ElementRef and accessing nativeElement but the attribute i18n is not a part of the DOM element when I view the source. When my app is launched the DOM looks like this:

<app-text _ngcontent-c0=""> DeveloperText</app-text>

So can I somehow read properties like this using the Angular Framework?

I have tried to use @Input() i18n; on the AppText component - but it's always undefined so it does not work. I know I can make a property on the component - but then i would replicate the content twice e.g. like this: <app-text customProperty="XXX" i18n="XXX"> DeveloperText</app-text>. I don't really want to do that unless there is really no way of reading the i18n property :) — Diemauerdk
– Diemauerdk, Commented Sep 27, 2018 at 6:21
I don't think you can access i18n property as angular compiler removes it from DOM, explained in angular documentation. — Ali Shahbaz
– Ali Shahbaz, Commented Sep 27, 2018 at 6:24
@AliShahbaz, can you send me a link of where this is explained? — Diemauerdk
– Diemauerdk, Commented Sep 27, 2018 at 6:44
angular.io/guide/i18n#mark-text-with-the-i18n-attribute i18n is a custom attribute, recognized by Angular tools and compilers. After translation, the compiler removes it. It is not an Angular directive. — yurzui
– yurzui, Commented Sep 27, 2018 at 6:49

danday74 · Accepted Answer · 2018-09-27 07:47:23Z

1

In your HTML:

<app-text #something i18n="meaning|description">DeveloperText</app-text>

In your controller:

@ViewChild('something') fred;

You now have a handle on the element. If you log it like this:

console.log(this.fred);
console.log(this.fred.nativeElement);

You should find the value of the property you are interested in.

answered Sep 27, 2018 at 7:47

danday74

58k56 gold badges273 silver badges337 bronze badges

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

1 Comment

Diemauerdk Over a year ago

Good simple solution and easy to change when angular eventually catches up

Collectives™ on Stack Overflow

Angular 6 - How to read angular specific attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related