5
में छुपाएं और दिखाएं मैं कोणीय 4 में मेनू टॉगल करने का प्रयास कर रहा हूं। मेरे पास 2 अलग-अलग घटक हैं। एक हेडर लेआउट के लिए है और दूसरा मेनू सूची के लिए है। मैंने हेडर लेआउट में आइकन के क्लिक पर टॉगल फ़ंक्शन लिखा है और मैं मेनू सूची को छिपाने और दिखाने की कोशिश कर रहा हूं। लेकिन यह मेरे लिए काम नहीं कर रहा है।कोणीय 4.0
app.navbarComponent.html फ़ाइल:
<header id='sv_header'>
<div class='row'>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'>
<a href='' class='logo'>
<img src='{{ logo }}' alt='Savaari' />
</a>
</div>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'>
<img src='{{ customercare }}' alt='24X7 Customer Care Support' />
</div>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'>
<a class='user_login' (click)='toggleMenu()'>
<img src='{{ signin }} ' alt='signin' />
<span>Sign In</span>
</a>
</div>
</div>
</header>
app.navbarComponent.ts फ़ाइल:
import { Component } from '@angular/core';
@Component({
selector: 'navbar',
templateUrl: './app.navbarComponent.html'
})
export class NavbarComponent {
menulist: boolean = false;
logo = '../assets/img/logo.png';
customercare = '../assets/img/cc-support.png';
signin = '../assets/img/signin.png';
toggleMenu(): void {
this.menulist = !this.menulist;
alert(this.menulist);
}
}
app.menuComponent
के बाद मेरी कोड है। एचटीएमएल फ़ाइल:
<div class='menulist' >
<ul>
<li *ngFor="let menu of menus" [HIDDEN]="!menulist">
<a href="{{menu.href}}">
{{menu.name}}
</a>
</li>
</ul>
</div>
क्या कोई इसे हल करने में मेरी सहायता कर सकता है।
अग्रिम धन्यवाद।