I have a parent component HeaderComponent with two children, NavComponent and BurgerComponent! At the momemnt there is a class that toggles the active inactive state of the burger when clicked on it! Below the first image when the burger is inactive, the second with active burger and NavComponent visible.
When clicked on the NavComponent area I have managed that the NavComponent closes.
The issue: The the NavComponent is closed by click on nav area, but I also need the burger to go to the inactive state(image 1).
What I have so far:
NavCompoent HTML with click event
<nav class="nav-menu {{ menuStatus }}" (click)="collapseMenu($event)">
NavComponent TS:
export class NavComponent implements OnInit {
title: string;
closeMenu: boolean;
#Output() sendTitle = new EventEmitter < string > ();
#Output() menuClose = new EventEmitter<any>();
#Input() menuStatus: boolean;
active = false;
constructor() {}
ngOnInit() {}
getText(event) {
this.title = event.target.innerText;
this.sendTitle.emit(this.title)
console.log("title sent", this.title);
}
collapseMenu($event) {
this.menuStatus = false;
this.menuClose.emit(this.menuStatus);
}
}
HeaderComponent HTML (this is the parent component)
<header class="sticky">
<div class="header-container">
<div class="header-left">
<h1>{{pageTitle}}</h1>
</div>
<div class="header-right">
<app-burger (opened)="burgerStatus($event)" [menuCloseBurger]="menuClose"></app-burger>
</div>
</div>
</header>
<app-nav (sendTitle)="getTitle($event)" [menuStatus]="burger" (menuClose)="sendingMenuClose($event)"></app-nav>
Header Component TS:
export class HeaderComponentComponent implements OnInit {
route: string;
pageTitle: string;
burger: string;
menuClose: string;
constructor(location: Location, router: Router) {
router.events.subscribe(val => {
this.pageTitle = location.path();
this.pageTitle = this.pageTitle.substring(1);
});
}
ngOnInit() {
this.pageTitle = this.route;
console.log(this.pageTitle);
}
getTitle($event) {
console.log(this.route);
this.pageTitle = $event;
}
burgerStatus($event) {
this.burger = $event;
console.log($event);
}
sendingMenuClose($event) {
this.menuClose = $event;
console.log("menu close at parent", this.menuClose);
}
}
BurgerComponent TS:
export class BurgerComponent implements OnInit {
active: boolean;
#Output() opened = new EventEmitter<any>();
#Input() menuCloseBurger: string;
constructor() { }
ngOnInit() {
this.active = false;
}
onBurgerClicked() {
this.active = !this.active;
this.opened.emit(this.active);
}
}
BurgerComponent HTML:
<div class="burger-menu" [class.active]="active" (click)="onBurgerClicked()">
<div class="burger-container">
<div class="burger-inner"></div>
</div>
</div>
collapseMenu() send a boolean value false, I need to get this into the BurgerCompnent class somehow so the value of that is false and the burger close. I am so close, I can't figure out the last step!
As per #PitchBlackCat's recommendation I have create a service NavStatusService!
import { Injectable } from '#angular/core';
import { EventEmitter } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class NavStatusService {
constructor() { }
public readonly isNavCollapsed$ = new EventEmitter<boolean>();
}
I have implemented it in the BurgerComponent:
onBurgerClicked() {
this.active = !this.active;
this.state.isNavCollapsed$.emit(this.active);
}
Now I am stuck as to how the communication between in the two component, Burger and Nav supposed to work!
You need a separate service to manage the shared variables.
You could try a framework like ngrx or create your own service along the lines of the example provided below.
Notice how the application-state.service has become the owner of the data that is shared between multiple components. This way, components that live in seperate parts of your layout can share data, whithout knowing about eachother.
application-state.service
export class ApplicationStateService implements OnInit {
public isNavCollapsed: boolean = false;
}
burger.component
<button class="burger" [class.active]="!state.isNavCollapsed" (click)="onBurgerClicked()">
</button>
import { Component, OnInit } from '#angular/core';
import { ApplicationStateService } from '../application-state.service';
#Component({
selector: 'app-burger',
templateUrl: './burger.component.html',
styleUrls: ['./burger.component.css']
})
export class BurgerComponent implements OnInit {
constructor(public state: ApplicationStateService) { }
ngOnInit() {
}
onBurgerClicked() {
this.state.isNavCollapsed = !this.state.isNavCollapsed;
}
}
nav.component
<ul *ngIf="!state.isNavCollapsed">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>
<button (click)="state.isNavCollapsed = true">close</button>
</li>
</ul>
import { Component, OnInit } from '#angular/core';
import { ApplicationStateService } from '../application-state.service';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
constructor(public state: ApplicationStateService) { }
ngOnInit() {
}
}
Check out this example on StackBlitz to see it in action
Related
I'm using class binding to add and remove classes based on click of sidebar button to minimize and maximize the sidebar.
I need same functionality to add and remove class in footer component also to maximize and minimize width of the footer based on click made in sidebar component.
sidebar.component.html
<nav class="sidebar-container" [ngClass]="minimize ? 'minimize' : ''">
<ul>
<li class="sidebar-minimize">
<a (click)="clickEvent()">Minmax</a>
</li>
</ul>
</nav>
sidebar.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
minimize: boolean = false;
ngOnInit(): void {
}
clickEvent() {
this.minimize = !this.minimize;
}
}
But i need same actions to be performed in footer component to add another CSS class through class binding followed by same clickEvent() method because in my situation sidebar component and footer components are interdependent on this clickEvent() function
For eg,
<footer (click)="clickEvent()" [ngClass]="minimize ? 'minimize':''">
<p>footer works</p>
</footer>
Is it possible to use same clickEvent() function in footer component for class binding
So in this case you can use a service. For example in your service you have a property like below:
#Injectable({
providedIn: 'root'
})
export class TestService {
private minimize: boolean;
public minimizeSubject: Subject<void>;
constructor() {
this.minimizeSubject = new Subject<void>();
this.minimize = false;
}
set setMinimize(minimize: boolean) {
this.minimize = minimize;
this.minimizeSubject.next();
}
Sidebar component should look like below:
export class SidebarComponent{
public minimize: boolean;
constructor(private testService: TestService) {
this.minimize = false;
}
public onClicked(): void {
this.minimize = !this.minimize;
this.testService.setMinimize = this.minimize;
}
In the end the footer component:
export class FooterComponent implements OnInit, OnDestroy {
private subscription: Subscription;
constructor(private testService: TestService) {
this.subscription = new Subscription();
}
ngOnInit(): void {
this.subscription = this.testService.minimizeSubject.subscribe(minimize => {
this.minimize = minimize;
});
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
Whatever i do angular does not detect change on talks array. I have a handleSubmit function to send the toolbar. Toolbar use it to send the changes to parent from input field.
My app.component.ts file
import { Component, Type, OnChanges, SimpleChanges } from '#angular/core';
import { getResponse } from '../api/API';
declare module '../api/API' {
export interface NlpAPI {
getResponse(data: any): Promise<any>;
}
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnChanges {
talks: string[];
title: string;
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
constructor() {
this.talks = [];
this.title = 'Talks';
}
ngOnInit() {
this.talks.push('Welcome to ProjectX! How can I help you?');
this.talks.push('I am a chatbot. I can help you with your queries.');
}
handleSubmit(data: any): void {
this.talks.push(data.talk);
}
messageResponse() {
// #ts-ignore: Object is possibly 'null'.
const x = document.getElementById('txt').value;
// #ts-ignore: Object is possibly 'null'.
document.getElementById('output').innerHTML =
'Your message is ' + '"' + x + '"';
}
}
My app.component.html
<!-- Toolbar -->
<app-custom-toolbar [handleSubmit]="handleSubmit"></app-custom-toolbar>
<!-- Highlight Card -->
<app-text-area [talksFromUser]="talks" [title]="title"></app-text-area>
<!-- Bottombar -->
<router-outlet></router-outlet>
My text-area.component.ts file
import { Component, Input, OnChanges, SimpleChanges } from '#angular/core';
#Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.css'],
})
export class TextAreaComponent implements OnChanges {
#Input() talksFromUser: string[] = [];
#Input() title: string = '';
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}
My text-area.component.html
<div class="main-text-area">
<div *ngFor="let item of talksFromUser">{{ item }}</div>
</div>
custom-toolbar.component.ts file
import { Component, Input, OnInit } from '#angular/core';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-custom-toolbar',
templateUrl: './custom-toolbar.component.html',
styleUrls: ['./custom-toolbar.component.css'],
})
export class CustomToolbarComponent implements OnInit {
talks: string[] = [];
#Input() handleSubmit!: (args: any) => void;
constructor() {}
ngOnInit(): void {}
onSubmit(f: NgForm) {
this.handleSubmit(f.value);
f.resetForm();
}
}
I tried also
this.talks = [...this.talks, data.talk]
Thank you all.
There are two issues in your code:
First one, you are calling handleSubmit("string") (so data is a string), but you are pushing data.talk, which is undefined (so talks will be [undefined, undefined, ...]). To fix it, use data:
handleSubmit(data: any): void {
this.talks.push(data); // use "data" instead of "data.talk"
}
Second one, you are using a AppComponent method into CustomToolbarComponent class. You need to keep the this scope of AppComponent. Also, you should use arrow functions:
handleSubmit = (data: any): void => {
this.talks.push(data);
}
I have just started with Angular and have already faced an issue: a button actually toggles the variable I need (show) but it doesn't affect the course.component
course.component must show app-csgo-course, boolean show is true because the component is visible, but after it toggles in navbar.component, nothing changes.
<app-csgo-course *ngIf="show"> </app-csgo-course>
import { NavbarComponent } from './../navbar/navbar.component';
import { Component, OnInit} from '#angular/core';
import { CourseService } from 'src/app/course.service';
#Component({
selector: 'app-course',
templateUrl: './course.component.html',
styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
service = new CourseService;
show = this.service.GetShow();
}
In navbar.component there's a button which toggles the "show" variable
<button (click)="ToggleShow()" >
<li class="nav-item active" id="csgo-logo">
<a href="#">
<img class="game-logo" src="assets\img\csgo-logo.png" title="Counter Strike: Global Offensive">
<!-- <a>CS:GO <span class="sr-only">(current)</span></a> -->
</a>
</li>
</button>
import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
service = new CourseService;
show = this.service.GetShow();
ngOnInit(): void {
}
public ToggleShow() {
this.service.show = this.service.ToggleShow();
console.log(this.service.show);
return this.service.show;
}
}
The course.service file
#Injectable({
providedIn: 'root'
})
export class CourseService {
show: boolean = true;
GetShow() {
return this.show;
}
ToggleShow() {
return this.show = !this.show
}
constructor() { }
}
}
Would appreciate your help!
Since you are new to Angular, let me break it down for you.
You need to create a BehaviorSubject to capture the event of toggle (this is called reactive programming which is a achieved using RxJS in Angular ).
Do not use new for a service, rather inject it in constructor.
course.service
#Injectable({
providedIn: 'root'
})
export class CourseService {
private show: boolean = true;
private toggle$ = new BehaviorSubject<boolean>(true);
constructor() { }
toggleEvent() {
return this.toggle$.asObservable();
}
toggleShow() {
this.show = !this.show
this.toggle$.next(this.show);
}
}
in NavbarComponent
import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
show = boolean;
// IMP: make sure to inject the service and not do "new CourseService;"
constructor(public service: CourseService){}
ngOnInit(): void {
this.service.toggleEvent().subscribe(showFlag => {
this.show = showFlag;
})
}
public ToggleShow(): void {
this.service.toggleShow();
}
}
in courseComponent
import { Component, OnInit} from '#angular/core';
import { CourseService } from 'src/app/course.service';
#Component({
selector: 'app-course',
templateUrl: './course.component.html',
styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
show: boolean ;
// IMP: make sure to inject the service and not do "new CourseService;"
constructor(public service: CourseService){}
ngOnInit(): void {
this.service.toggleEvent().subscribe(showFlag => {
this.show = showFlag;
})
}
}
PS: I would suggest you to read about "how to unsubscribe an observable" and how it causes memory leaks. Once you get some idea, you should implement that in the above provided code as well. That's a best practice. Happy learning. Let me know if you have any more questions
I am trying to implement a functionality which will display a list of nodes selected from the TreeNode structure, on the right.
Something similar to this plunkr I found : http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
In my current method, I am getting the right-side list to be in the same hierarchy order as that on the left.
For eg : Even if I select node "B" before node "A", in the list, it still shows first A and then B (because A is above B in the displayed hierarchy).
Rightside.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
rightside.component.ts:
import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '#angular/core';
import { DataService } from '../../shared/service/data.service';
import { TreeNode } from '../../shared/dto/TreeNode';
import html from './rightside.component.html';
import css from './rightside.component.css';
#Component({
selector: 'rightside-component',
template: html,
providers: [DataService],
styles: [css],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RightSideComponent implements OnInit {
selections: string[];
#Input() treeNode: TreeNode<string>[];
constructor(private cd: ChangeDetectorRef) {}
ngOnInit() {
}
getSelections() : TreeNode<string>[] {
if (typeof(this.treeNode) == "undefined" || (this.treeNode) === null) {
return [];
}
return this.treeNode;
}
deselect(item: TreeNode<string>): void {
if((item.children) !== null) {
item.children.forEach(element => {
this.deselect(element);
});
}
item.selected = false;
}
}
productline.component.html:
<p>Productlines</p>
<mat-input-container>
<input #searchInput matInput placeholder="Search for Product Line">
</mat-input-container>
<div class="flex-container">
<div class="PLCheck" *ngIf="isDataLoaded">
<fortune-select
(dataChanged)="onDataChange($event)"
[searchTerm]="searchInput.value"
[currentNode]="tree"
[singleSelect]="singleSelect"
[collapsed]="true"></fortune-select>
</div>
<div class="sendToRight">
<rightside-component
[treeNode]="selectedProductLine">
</rightside-component>
</div>
</div>
Productline.component.ts:
import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '#angular/core';
import * as API from '../../shared/api-routes';
import { DataService } from '../../shared/service/data.service';
import { ValidationService } from '../../shared/service/validation.service';
import { Subject } from 'rxjs/Subject';
import { BasestepComponent } from '../basestep-component/basestep.component';
import { TreeNode } from '../../shared/dto/TreeNode';
import html from './productline.component.html';
import css from './productline.component.css';
#Component({
selector: 'productline-component',
template: html,
providers: [DataService],
styles: [css],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductlineComponent extends BasestepComponent<string> implements OnInit {
selectedProductLine: TreeNode<string>[];
constructor(dataService:DataService, cd:ChangeDetectorRef) {
super(dataService, cd);
}
ngOnInit() {
this.subject.subscribe((productline) => this.productLineChange(productline));
}
public productLineChange(productLine: TreeNode<string>[]):void {
this.selectedProductLine = productLine;
}
}
Basestep.component.ts:
import { Input, ChangeDetectorRef } from '#angular/core';
import { castTree, ReportTemplate } from '../report-common';
import { DataService } from '../../shared/service/data.service';
import { Subject } from 'rxjs/Subject';
import { ValidationService } from '../../shared/service/validation.service';
import { TreeNode } from '../../shared/dto/TreeNode';
export class BasestepComponent<T> {
public tree: TreeNode<T>;
public singleSelect: boolean = false;
public isDataLoaded: boolean;
public template: ReportTemplate;
#Input() templateSubject: Subject<ReportTemplate>;
#Input() subject: Subject<TreeNode<T>[]>;
constructor(private dataService:DataService, private cd: ChangeDetectorRef) {}
public onDataChange(event:TreeNode<T>[]):void {
if (!ValidationService.isNullOrUndefined(this.subject)) {
this.subject.next(event);
}
}
public markForCheck() {
this.cd.markForCheck();
}
public reset() {
this.tree = null;
this.isDataLoaded = false;
this.markForCheck();
}
}
I want the order on the right to be in the order in which the items are selected and not based on the hierarchy. Hence, even if A is above B in the hierarchy, I would want B to be shown and then A based on the selections.
Basically, I would like the selections to be displayed dynamically in the order that they are chosen.
EDIT 1:
Adding code for fortune-select.component.ts:
import { Component, Input, Output, EventEmitter } from '#angular/core';
import { TreeNode } from './../dto/TreeNode';
import html from './fortune-select.component.html';
import css from './fortune-select.component.css';
#Component({
selector: 'fortune-select',
template: html,
styles: [css],
})
export class FortuneSelectComponent<T> {
#Input() currentNode: TreeNode<T>;
#Input() collapsed: boolean = false;
#Input() linked: boolean = true;
#Input() searchTerm: string = '';
#Input() singleSelect: boolean = false;
#Output() dataChanged = new EventEmitter<TreeNode<T>[]>();
selectedRadioValue:T;
public checkboxChangedEvent():void {
let list:TreeNode<T>[];
this.currentNode.indeterminate = true;
if (this.linked) {
list = TreeNode.getTopLevelCheckedNodes(this.currentNode);
} else {
list = TreeNode.getAllCheckedNodes(this.currentNode);
}
this.dataChanged.emit(list);
}
public radioChangedEvent(event:TreeNode<T>):void {
this.dataChanged.emit([event]);
}
}
Is there a way I could maybe store every selection in a list and then display the list? That way, it will show the selections in order. Right now, the entire structure is getting traversed, hence it displays in the tree's order.
Is there a way to do this?
I'm using Material with angular, and I want to toggle the Sidenav from another component, using viewchild, but i get undefined when i try to get the mat-sidenav element. Heres mi code
sidenav.component.html
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav class="example-sidenav">
Sidenav content goes here!
</mat-sidenav>
<div class="sidenav-container">
123
</div>
</mat-sidenav-container>
sidenav.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import {MatSidenav} from '#angular/material/sidenav';
#Component({
selector: 'app-sidemenu',
templateUrl: './sidemenu.component.html',
styleUrls: ['./sidemenu.component.scss']
})
export class SidemenuComponent implements OnInit {
#ViewChild('sidenav') sidenav;
constructor() { }
ngOnInit() {
}
openSideNav(){
console.log(this.sidenav)
this.sidenav.open();
}
}
And this is the component from where i try to toggle the sidenav
header.component.ts
import { Component, OnInit } from '#angular/core';
import { SidemenuComponent } from '../sidemenu/sidemenu.component';
#Component({
providers:[SidemenuComponent],
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
constructor(private sm: SidemenuComponent) { }
ngOnInit() {
}
openSideNav(){
this.sm.openSideNav()
}
}
header.component.html
<mat-toolbar color="primary">
<mat-toolbar-row>
<div class="navbar-brand">
<img class="img-fluid" src="./assets/icons/logo_femsa_blanco.png"/>
</div>
<button class="buton-menu" mat-icon-button (click)="openSideNav()">
<img class="img-fluid menu-icon" src="./assets/icons/icons8-menu-filled-50.png"/>
</button>
<span class="toolbar-spacer"></span>
<div class="font-weight-light text-right user-name">
Hola Mundo!
</div>
</mat-toolbar-row>
</mat-toolbar>
Hope someone can help. I's starting with angular. Sorry for bad english
base on your sample, i have create Service to manage communication between component.
Goal is to have, from anywhere on your code, API to ask menu to open / close / toggle.
Functional step :
1/ From anywhere (button click, custom things), you want to make action on your side-nav. You call public function from your service, exemple : this.menuService.open()
2/ if needed, your service will next new menu state by Observable.
3/ Component who manage your sidenav will subscribe to any change on this state and do "open/close" if needed.
State is manage by Subject and internal service flag
export class MenuService {
private menuIsOpen$ : Subject<boolean>;
private menuIsOpen: boolean = false;
constructor() {
this.menuIsOpen$ = new Subject<boolean>();
}
/**
* If menu is open, let close it
**/
public open() {
if(!this.menuIsOpen) {
this.menuIsOpen = true;
this.menuIsOpen$.next(false);
}
}
/**
* Both silence open and close is use by navbar output, to silence switch internal flag.
**/
public silenceOpen() {
this.menuIsOpen = true;
}
public silenceClose() {
this.menuIsOpen = false;
}
/**
* If menu is close, let open it
**/
public close() {
if(this.menuIsOpen) {
this.menuIsOpen = false;
this.menuIsOpen$.next(false);
}
}
public toggle() {
this.menuIsOpen = !this.menuIsOpen;
this.menuIsOpen$.next(this.menuIsOpen);
}
public asObservable()
{
return this.menuIsOpen$.asObservable();
}
}
then your Component who embed sidenav :
export class SidemenuComponent implements OnInit {
#ViewChild('sidenav') sidenav: MatSidenav;
constructor(private menuService: MenuService)
{
}
ngOnInit() {
/**
When you reveive order to open / close sidenav.
**/
this.menuService.asObservable().subscribe((isOpen: boolean) => {
if(isOpen) {
this.sidenav.close();
}
else{
this.sidenav.open();
}
});
}
onOpenedChange() {
this.menuService.silenceOpen();
}
onClosedChange() {
this.menuService.silenceClose();
}
}
Html side :
Sample : https://stackblitz.com/edit/angular-2faa8z