Angular 6 - ERROR DOMException: Failed to execute 'setAttribute' on 'Element':

javascript angular dom domexception
Tanvir Anowar picture Tanvir Anowar · Aug 3, 2018 · Viewed 8.7k times · Source

I'm new with Angular 6 . I have assigned public property at component.js file and the values are not rendering in the component.html file. I have attached chrome log , component.ts and component.html file.

It would be highly appreciated if you can let me know where I'm doing wrong.

html file script file Chrome colsole log

Answer

Amit Chigadani picture Amit Chigadani · Aug 3, 2018

Your error says it so clearly that you are doing something wrong with {{m.name}}. It is trying to add it as an attribute because you mention it inside the attribute section which is invalid.

Move it to the content section i.e between the opening and closing tags.

Change it this way :

<option *ngFor="let m for data" value="{{m.id}}">{{m.name}}</option>

Related questions

Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture?

I'm currently putting together some best practices for testing Angular 2 apps on a component level. I've seen a few tutorials query a fixture's NativeElement object for selectors and the like, e.g. However, in juliemr's Angular 2 test seed she accesses …

Read More
How can I set the value of a native element in Angular, using Renderer2?

I'd like to set the innerText/innerHTML/textContent of a nativeElement? this.render.setValue(this.nativeCloneLi.querySelector('.down .inn'), timeVal); where timeVal is a string the element is correctly selected, but setValue seems not working at all

Read More
Angular2 Directive: How to detect DOM changes

I want to implement Skrollr as an Angular2 attribute directive. So, the format may be: <body my-skrollr> </body> However, in order to implement this, I need to be able to detect changes in the DOM in …

Read More