Angular 2: unterer Rand beim Klicken

Question

Ich habe 3 Tabs und ich möchte einen unteren Rand, wenn Sie auf den Tab klicken. Wenn ich auf einen anderen Tab klicke, sollte der untere Rand auf diesen Tab gelegt werden.

Ich habe unten Code versucht.

.features_selection_menu .menu_div { 
 
    display: inline-block; 
 
    margin-left: -3px; 
 
    vertical-align: bottom; 
 
} 
 
.features_selection_menu .menu_div .menu_text_div { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    height: 50px; 
 
    border-bottom: 2px transparent solid; 
 
} 
 
.features_selection_menu .menu_div .menu_text_div span { 
 
    position: relative; 
 
    bottom: 8px; 
 
    font-size: 18px; 
 
} 
 
.features_selection_menu .menu_div .menu_text_div_border_bottom { 
 
    border-bottom: 2px #3a3f51 solid; 
 
} 
 
.features_selection_menu .menu_div .default_feature_text_color { 
 
    color: #98a6ad; 
 
} 
 

 
.features_selection_menu .menu_div:first-child { 
 
    margin-left: 0px !important; 
 
} 
 
.features_selection_menu .menu_div:nth-child(n) { 
 
    margin-left: 40px; 
 
}

<div class="features_selection_menu" [ngSwitch]="currentFeature"> 
 
       <div class="menu_div"> 
 
       <div class="menu_text_div {{currentFeature=='website' ? 'menu_text_div_border_bottom' : ''}} " (click)="currentFeature='website'"> 
 
        <span class="cursor_pointer {{currentFeature=='website' ? 'selected_feature_text_color' : 'default_feature_text_color'}} ">&nbsp;Website&nbsp;</span> 
 
       </div> 
 
       </div> 
 

 
       <div class="menu_div"> 
 
       <div class="menu_text_div {{currentFeature=='app' ? 'menu_text_div_border_bottom' : ''}} " (click)="currentFeature='app'"> 
 
        <span class="cursor_pointer {{currentFeature=='app' ? 'selected_feature_text_color' : 'default_feature_text_color'}} ">&nbsp;App&nbsp;</span> 
 
       </div> 
 
       </div> 
 

 
       
 
      </div>

ich nicht bekommen meine Ausgabe auf klicken.

Jede Hilfe wäre großartig.

Vielen Dank.

Answer 1

Ja verwenden ngClass anstelle der normalen Klasse Attribut

<div [ngClass]="{'menu_text_div': true, 'menu_text_div_border_bottom': currentFeature=='app'} " >