How to add class in section after clicking on menu in Angular 4

Question

Please, here me to add "active" class in "lang" class name div after clicking on a menu. Like if user click on "English" menu then "active" class add in "english" name id section and when user click on "Hindi" menu the "active" class add in "hindi" name id section and remove from "English" name id setion and all the section except of "hindi" name id section.

I'm adding my requirement in jquery but I required this function in Angular 4

$(document).ready(function(){
		$('ul li').click(function(){
			var dl = $(this).attr('data-lang');
			$(this).addClass('active');
			$(this).siblings().removeClass('active');
			$('.lang').removeClass('active');
			$('#'+dl).addClass('active');
		});
	});

ul{margin:0; padding:0;}
ul li{list-style:none; display:inline-block; padding:7px 10px; background:#000; color:#fff; border-radius:3px;}
.clear{clear:both: height:40px;}
.lang{display:none; background:#f3f7f8; padding:30px;}
.lang.active{display:block !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li data-lang="english" class="active">English</li>
<li data-lang="hindi">Hindi</li>
<li data-lang="telugu">Telugu</li>
</ul>
<div class="clear"></div>
<div class="lang active" id="english">Show English Section</div>
<div class="lang" id="hindi">Show Hindi Section</div>
<div class="lang" id="telugu">Show Telugu Section</div>

Answer 1

You can use Angular [class.className]="condition" syntax.

It has been a good practice (at least for myself) to create a model or an interface for the languages in my system. This way you have a full typescript functionality and working with languages gets a lot easier.

I'd go for interface, if you have no need for dynamic changes in your object, especially, if you don't need any custom getters and setters.

// interfaces/Language.ts

export interface Language {
    id: number;
    name: string;
}

In your component you'd then have an array of Languages (or you can use a service, which also makes more sense to me).

@Component({/* ... */})
export class SomeComponent {

    languages: Language[];
    activeLanguage: Language;

    constructor() {
        this.languages = [
            { id: 1, name: 'English' },
            { id: 2, name: 'Hindi'   },
            { id: 3, name: 'Telugu'  },
        ];
        // You can also create a default logic for setting activeLanguage
        // e.g.: set the active language based on data from some service
        // or just set the default language (English for example)
        this.activeLanguage = this.languages[0];
    }
}

This way enables you to make your template for language selection easier, shorter and more readable. As following:

<ul *ngIf="languages.length">
    <li *ngFor="let language of languages" 
        (click)="activeLanguage = language"
        [class.active]="activeLanguage === language">
        {{ language.name }}
    </li>
</ul>

In case you want to show all the section, but add active class to the activeLanguage's section only, here's what you can do:

<div class="lang" [class.active]="activeLanguage.id === 1">Show English Section</div>
<div class="lang" [class.active]="activeLanguage.id === 2">Show Hindi Section</div>
<div class="lang" [class.active]="activeLanguage.id === 3">Show Telugu Section</div>

In case you want to show only the activeLanguage's section, you don't need to worry much about the classes, because only the selected language's section will be showed.

<div *ngIf="activeLanguage.id === 1" class="lang active">Show English Section</div>
<div *ngIf="activeLanguage.id === 2" class="lang active">Show Hindi Section</div>
<div *ngIf="activeLanguage.id === 3" class="lang active">Show Telugu Section</div>

Note that in this example the active class is not needed as only section that will display is the active section.

Also, keep in mind, that if there is any way to create a content for the sections dynamically, you can loop through the languages once again, which will, once again, result in shorter and easier syntax like the following:

<div *ngFor="let language of languages"
     class="lang"
     [class.active]="activeLanguage === language">
    <!-- Build content somehow -->
</div> 

Hope I cleared that out a little.

Answer 2

Here is your requirement in Angular way and I also created a Plunker.

I used *ngIf, (click) and [ngClass] Angular directives.

The ngClass directive changes the class attribute that is bound to the component or element it's attached to.

Steps:

• I have taken an active variable which maintains the current active li
• I added a click function binding and called setActive function which makes the current click li active.
• I removed your jquery and data-lang code and done it in angular way.
• I added *ngIf to display required lang class.
• Finally I used [ngClass] to make the class active fir cuurent li depending on that variable

Code:

import { Component } from '@angular/core';
import { Modal } from 'ng2-modal'

@Component({
  selector: 'my-app',
  directives: [Modal],
  template: `
  <ul>
    <li (click)="setActive('english')" class="active">English</li>
    <li (click)="setActive('hindi')">Hindi</li>
    <li (click)="setActive('telugu')">Telugu</li>
  </ul>
<div class="clear"></div>
<div class="lang" *ngIf="active == 'english'" [ngClass]="{'active':active == 'english'}" id="english">Show English Section</div>
<div class="lang" *ngIf="active == 'hindi'" [ngClass]="{'active':active == 'hindi'}" id="hindi">Show Hindi Section</div>
<div class="lang" *ngIf="active == 'telugu'"[ngClass]="{'active':active == 'telugu'}"  id="telugu">Show Telugu Section</div>
  `
})
export class AppComponent { 
  public active = "english"

  setActive(lang){
    this.active = lang;
  }

}

Here is a working Plunker