Use the Navs Tab of Bootstrap in Angular 7+

Question

Use the Navs Tab of Bootstrap in Angular 7+

Navigation

#1 by (1 votes)

0

I am trying to create a Nav Tab from a loop with NgFor in Angular 7+ but when I try to bind the aria-controls property it always gives me error, attached code and error.

CODE

<a *ngFor="let video of videos; let i = index" 
   [ngClass]="{active: i == 0}"
   class="nav-link" 
   id="programación-horaria-tab" 
   data-toggle="pill" 
   href="#programación-horaria" 
   role="tab" 
    aria-controls="{{video.name}}" 
   aria-selected="false">Programación horaria</a>

ERROR

Can not bind to 'aria-controls' since it is not a known property of 'a'. ("href=" # schedule-time " role="tab" [ERROR - >] aria-controls="{{video.name}}" aria-selected="false" > Time schedule) at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js: 25787) at compiler.js: 25697 at Object.then (compiler.js: 2418) at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js: 25696)

If I try to add another way, the same code will happen to me.

CODE

<a *ngFor="let video of videos; let i = index" 
                   [ngClass]="{active: i == 0}"
                    class="nav-link" 
                    id="programación-horaria-tab" 
                    data-toggle="pill" 
                    href="#programación-horaria" 
                    role="tab" 
                    [aria-controls]="video.name" 
                    aria-selected="false">Programación horaria</a>

ERROR

Can not bind to 'aria-controls' since it is not a known property of 'a'. ("href=" # schedule-time " role="tab" [ERROR - >] [aria-controls]="video.name" aria-selected="false" > Time Programming "): ng: ///AppModule/ProductComponent.html@58: 24 at syntaxError (compiler.js: 2427) at TemplateParser.push ../ node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js: 20311) at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js: 25857) at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js: 25844) at compiler.js: 25787 at Set.forEach () at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js: 25787) at compiler.js: 25697 at Object.then (compiler.js: 2418) at JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js: 25696)

angular angular5

asked by Agustin Navarro 03.01.2019 в 14:22

source

1 answer

How to ask before closing a window Error creating a Trigger

score 1 · Accepted Answer

SOLUTION

The solution is the following one must add ATTR. in front of the attribute. Angular has a rule that is if you want to work with an attribute that is not valued because there are so many and you can invent them if you add ATTR at the beginning. AttributeName you can now binde this attribute and treat it as an attribute of it.

[attr.aria-labelledby]="product.name"

Graphic explanation.

We have an attribute that does not work with angle directives or bindings.

attr-video-id="553625"

We want this attribute to be bindable with a variable that we have on the TypeScript side but if we enclose it in [] it will give us an error because angular does not recognize that what is inside [] is a directive of its own, this we solve it by adding attr. in front of the attribute to tell angular that the word is an attribute and treat it with such and be able to binde the content and it would be like this.

[attr.attr-video-id]="variable"

I hope you have explained me well.