Make aria-selected true on selected tab on click in Angular

I am building a reusable navigation "tabs" component where I would like the selected tab to be set to "true" for aria-selected on click, however aria-selected is remaining false for all three tabs on click. How do I set an individual tab to true if it is clicked?


import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  tabs = [
    { tabName: 'tab1' },
    { tabName: 'tab2' },
    { tabName: 'tab3' }
  selected: boolean;

    this.selected = tab.tabName


<div role="tablist">
  *ngFor="let tab of tabs" 


import { Component, OnInit, Input } from '@angular/core';

  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
export class TabsComponent implements OnInit {

  @Input() tab
  @Input() selected



aria-selected="tab.tabName === selected">

1 answer

  • answered 2018-03-13 20:56 Armen Vardanyan

    Use [attr.aria-selected]="tab.tabName === selected" instead of aria-selected="tab.tabName === selected". The former is binding to a property of the component class, the later is just passing the literal value