On clicking on one tab i want to make the class tab-active and remove it from the other and vice versa. The HTML code on which I want to implement this is :-
<div class="tab-change-login">
<ul class="un-styled tab-ul">
<li class="tab-active" data-login="signin-area">SIGN IN</li>
<li data-login="signup-area">SIGN UP</li>
</ul>
</div>
How do I write a onClick function to switch between 2 tabs usiing angular2
You can use class binding like:
#Component({
selector: '...',
template: `
<div class="tab-change-login">
<ul class="un-styled tab-ul">
<li [class.tab-active]="activeTabName == 'signin-area'"
data-login="signin-area"
(click)="activeTabName = 'signin-area'">SIGN IN</li>
<li [class.tab-active]="activeTabName == 'signup-area'"
data-login="signup-area"
(click)="activeTabName = 'signup-area'">SIGN UP</li>
</ul>
</div>
`})
export class MyComponennt {
activeTabName = 'signup-area';
}
There are other ways like ngClass
Related
Please see attached image.
So, this is a navbar, where clicking on any of the tabs, the content below the nav will change based on which tab is selected.
Here is code for an example of how the function works for when click event is handled when Bespoke Manufacturing is clicked:
toggleBespoke() {
this.showBespoke = true;
this.showHow = false;
this.showCasting = false;
this.showForging = false;
this.showInjection = false;
this.showPressing = false;
this.showTurning = false;
}
As you can see, it's simple, the about showAbout variable is set to true whilst all the others are manually set to false.
ngClass is used which gives the blue highlighted effect so only one of the tabs gets highlighted when selected as only one can be true whilst others are false.
The same logic is then applied to the 6 other tabs.
But this is my question, what is the way to prevent code duplication and handle such click events in one function only?
You can use a property in your component which stores the active tab.
export class AlarmsComponent {
activeTab = 'bespoke';
}
And then you can use it in your template like this:
<ul class="tabs">
<li>
<a (click)="activeTab = 'bespoke'"
[ngClass]="{active: activeTab === 'bespoke'}"
>
Bespoke manufacturing
</a>
</li>
<li>
<a (click)="activeTab = 'how'"
[ngClass]="{active: activeTab === 'how'}"
>
How it works
</a>
</li>
</ul>
<div class="tab-bespoke" *ngIf="activeTab === 'bespoke'">
Bespoke manufacturing tab content
</div>
<div class="tab-how" *ngIf="activeTab === 'how'">
How it works tab content
</div>
Another solution (dirtier than the previous one) is to create a single function executed on click passing the $event param.
For instance you have something like the following to manage the nav item:
<li class="nav-item"><a id="bespoke" class="nav-link" href="#" tabindex="-1" (click)="onClick($event)">BESPOKE MANUFACTURING</a> </li>
And inside the class you have onClick function as the following:
onClick(ev){
let clickedId = ev.target.id;
//clickedId is the id of the clicked element and you can add class accordingly
if(clickedId === 'bespoke'){
//the user clicked the bespoke item
}
}
Create a variable to store the current active tab, in interaction with tab set current clicked tab to activeTab, then apply active inactive class using this variable ,for example in
app.component.ts
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
activeTab: string = 'tab1';
isActive(tabName){
return this.activeTab === tabName;
}
makeActive(tab){
this.activeTab = tab;
}
}
in Html
app.component.html
<ul class="nav nav-tabs">
<li class="nav-item">
<a [ngClass]="{'nav-link': true, 'active':isActive('tab1')}" (click)="makeActive('tab1')">Tab 1</a>
</li>
<li class="nav-item">
<a [ngClass]="{'nav-link': true, 'active':isActive('tab2')}" (click)="makeActive('tab2')">Tab 2</a>
</li>
<li class="nav-item">
<a [ngClass]="{'nav-link': true, 'active':isActive('tab3')}" (click)="makeActive('tab3')">Tab 3</a>
</li>
<li class="nav-item">
<a [ngClass]="{'nav-link': true, 'active':isActive('tab4')}" (click)="makeActive('tab4')">Tab 4</a>
</li>
</ul>
<div>
<div class="tab-bespoke" *ngIf="isActive('tab1')">
tab 1 content
</div>
<div class="tab-bespoke" *ngIf="isActive('tab2')">
tab 2 content
</div>
<div class="tab-bespoke" *ngIf="isActive('tab3')">
tab 3 content
</div>
<div class="tab-bespoke" *ngIf="isActive('tab4')">
tab 4 content
</div>
</div>
here is the running sample https://stackblitz.com/edit/angular-bootstrap-4-starter-cbrzm5
I'd go with the framework and actually use proper routing instead of hiding content by hand.
as a bonus, you'll get the current tab get set to automatically when the user refresh the page.
I made a Multistep Drop Down Using UL and Li
code :
<li>{{dropdowntext}}
<ul>
<li>Exception on Leave</li>
<li>Performance Reward
<ul>
<li>Double Beat Working</li>
<li>Working on Weekly-Off/Holiday</li>
</ul>
</li>
</ul>
</li>
</ul>
Please see : https://stackblitz.com/edit/angular-7cwuuw?file=src%2Fapp%2Fapp.component.html
How do I take selected value from drop down using UL Li to the ts file .
I tried to do it using NgModule bit It did not work .
Please Look into this .
Since this is a pure CSS solution for a drop-down, NgModule wouldn't work because the vanilla HTML elements do not have those directives. However, you could assign a common template reference variable to all the anchor tags and assign a common event handler to them. Try the following
Template
<ul class="main-navigation">
<li><a #option href="#">Select</a>
<ul (select)="gg($event)" (change)="onChange($event)">
<li><a #option href="#">Exception on Leave</a></li>
<li><a #option href="#">Performance Reward</a>
<ul>
<li><a #option href="#">Double Beat Working</a></li>
<li><a #option href="#">Working on Weekly-Off/Holiday</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Controller
import { Component, ViewChildren, ElementRef, Renderer2, QueryList } from '#angular/core';
export class AppComponent {
#ViewChildren('option', { read: ElementRef }) private options: QueryList<ElementRef>;
private onMouseUp = (data) => { console.log(data); }
constructor(private renderer: Renderer2) { }
gg(evwent){
alert("vdjv");
}
onChange(event) {
console.log(event);
}
ngAfterViewInit() {
this.options.forEach(option => {
this.renderer.listen(option.nativeElement, 'mouseup', () => {
this.onMouseUp(option.nativeElement.innerHTML);
});
})
}
}
I've modified your Stackblitz
Let's say I have an unordered list like so
<div>
<ul class="data-container">
<li #H1>00</li>
<li #H2>01</li>
<li #H3>02</li>
<li #H4>03</li>
<li #H5>04</li>
...
</ul>
</div>
What's the best way to get a element based on it's local variable using ViewChild then retrieving it's value and give it a special class (say class="active")
Is there a filter or find function I can use here?
Also, let's say I want to select one of the items, is there a better way than using (click)="SelectElement()" on all of them?
You can create a LiDirective to mark all LI. After that you can use all API provided my QueryList like find,filter, reduce, toArray ...
#Directive({
selector:'li'
})
export class LiDirective{}
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div>
<ul class="data-container">
<li>00</li>
<li #H2>01</li>
<li #H3>02</li>
<li #H4>03</li>
<li #H5>04</li>
</ul>
</div>
</div>
`,
})
export class App {
#ViewChildren(LiDirective, {read:ElementRef}) lis: QueryList<any>;
name:string;
constructor(private renderer: Renderer2) {
this.name = `Angular! v${VERSION.full}`
}
ngAfterViewInit() {
let second = this.lis.toArray()[2];
this.renderer.setStyle(second.nativeElement, 'color', 'blue');
}
}
In my application i have to implement hide and show side menu. By default the page menu is open while clicking the toggle menu i have to hide the side menu. How can i implement this.
what i have is:
app.component.html, nav.component.html
<div class="menu-toggler sidebar-toggler">
<span></span>
</div>
<ul>
<li class="nav-item ">
<a class="nav-link nav-toggle">
<i class="icon-diamond"></i>
<span class="title">Name</span>
<span class="arrow"></span>
</a>
</li>
</ul>
Myservice.ts
export class GlobalService {
public collapse;
constructor() { }
setValue(val: boolean) {
this.collapse = val;
}
getValue() {
return this.collapse;
}
EDIT
app.component.html
<div *ngIf="!toggle()"class="menu-toggler sidebar-toggler">
<span></span>
</div>
app.component.ts
import { GlobalService } from "path";
export class AppComponent {
toggle() {
this.globalService.setValue(false);
}
}
how can i hide this list(in nav.html) while clicking menu toggle (app.compnent.html)? Any help will really appreciable. i am new to angular.
If use of service is not the priority then you can simply maintain simple variable to do this task.
Your app.component.ts
export class AppComponent {
showMenu : boolean = true;
}
Your app.component.html
<div (click)="showMenu = !showMenu" class="menu-toggler sidebar-toggler"><span></span>
</div>
<ul *ngIf="showMenu">
<!-- used showMenu to hide/show -->
<li class="nav-item ">
<a class="nav-link nav-toggle">
<i class="icon-diamond"></i>
<span class="title">Name</span>
<span class="arrow"></span>
</a>
</li>
</ul>
hope this helps ...
For this ,
You can make a CommonService to store the state of menu or and use that Service to make toggle you menu.
You can also use #Input #Output , in case you are having parent child relation between components.
Method will depend on how is your project/file structure.
You can create a service and preferably make a static variable inside to get and set the visibility state of the menu. By this you could directly set and get the variable by using ComponentName.variableName.
to play with the visibility you could use(Sorry if there is any syntax errors)
1> Set the document.getelementbyid("idofelement").display= none or block
2>use *ngIf="someboolean" where you should set the boolean in your ts file
how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.