I migrated an project from Angular 7 to 8 and I had to change the Renderer class to Renderer2 and I am facing the following error:
ERROR Error: Template error: Can't bind to 'disabled' since it isn't a known property of 'div'.
at createUnknownPropertyError (vendor.js:83083)
at validateAgainstUnknownProperties (core.js:12699)
at elementPropertyInternal (core.js:12604)
...
How was the class with the Renderer:
import { OnInit, Directive, Input, Renderer, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
import { Loader } from './loader';
@Directive({
selector: '[asCardLoader]'
})
export class CardDirective implements OnInit {
private nativeElement: Node;
private loaderElement: Node;
constructor(private renderer: Renderer, private element: ElementRef) {
this.nativeElement = element.nativeElement;
}
ngOnInit() {
if (this.loader) {
this.initLoader();
}
showLoading() {
const divElement = this.renderer.createElement(this.nativeElement, 'div');
this.renderer.setElementClass(divElement, 'card-loading', true);
this.renderer.setElementStyle(divElement, 'display', 'block');
this.loaderElement = divElement;
const nextElem = this.element.nativeElement.nextElementSibling;
const parent = this.element.nativeElement.parentNode;
parent.insertBefore(divElement, nextElem);
// other methods
What I've tried with renderer2
import { OnInit, Directive, Input, Renderer2, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
import { Loader } from './loader';
@Directive({
selector: '[asCardLoader]'
})
export class CardLoaderDirective implements OnInit {
private nativeElement: Node;
private loaderElement: Node;
@Input()
private loader: Loader;
constructor(private renderer: Renderer2, private element: ElementRef) {
this.nativeElement = element.nativeElement;
}
ngOnInit() {
if (this.loader) {
this.initLoader();
}
}
showLoading() {
const divElement = this.renderer.createElement('div');
this.renderer.appendChild(this.nativeElement, divElement);
this.renderer.addClass(divElement, 'card-loading');
this.renderer.setStyle(divElement, 'display', 'block');
this.loaderElement = divElement;
const nextElem = this.element.nativeElement.nextElementSibling;
const parent = this.element.nativeElement.parentNode;
parent.insertBefore(divElement, nextElem);
}
With renderer2, the creatElement method, despite having the same name, does not work the same way anymore and I didn’t understand very well from the documentation the correct way that this transition should be made.
NativeElement (div) I assume it has disabled property, because I don't see any where in your examples disabled property,
The element doesn't have a disabled property. you can use the example down if you need to add disabled without error
<div [attr.disabled]="condition ? true : null">