We Keep Coding

Angular undefined error when assigning array to another array

So in this component, i am getting an array of objects from the parent component, which i use to display a list of objects, but when i create a new array, and assign the first array to it and try to work with it, i get an error that the new array is undefined, here's my code:
export class AdherentsListComponent implements OnInit {
// adherents: Adherent[];
adherent: Adherent;
#Input() adherents: Adherent[];
constructor(private adherentService: AdherentService, private alertify: AlertifyService, private router: Router,private modalService: NgbModal) { }
ngOnInit() {
}
tempAdherents = this.adherents; //this is what's not working
loadAdherent(id){
this.adherentService.getAdherent(id).subscribe((adherent: Adherent) => {
this.adherent = adherent;
}, error => {
this.alertify.error(error);
})
}
}
Please any idea how can i create the new array, Thank you.

Try to initzialize your input like #Input() adherents: Adherent[] = [] as Adherent[];

You are missing a declaration for tempAdherents.
export class AdherentsListComponent implements OnInit {
// adherents: Adherent[];
adherent: Adherent;
#Input() adherents: Adherent[];
constructor(private adherentService: AdherentService, private alertify: AlertifyService, private router: Router,private modalService: NgbModal) { }
ngOnInit() {
}
var tempAdherents = this.adherents; //this is what's not working
loadAdherent(id){
this.adherentService.getAdherent(id).subscribe((adherent: Adherent) => {
this.adherent = adherent;
}, error => {
this.alertify.error(error);
})
}
}

get result in parent component after selectAll and unSelectAll event emitted from child (Angular)

Hi I am now working on angular to build a multiselect dropdown using ng-multiselect-dropdown(https://www.npmjs.com/package/ng-multiselect-dropdown).
I used parent-child component communication through event emitter:
in child.component.ts:
import {Component, EventEmitter, Input, OnInit, Output} from '#angular/core';
import {IDropdownSettings} from 'ng-multiselect-dropdown';
export interface IMultiDropdownConfig {
placeholder: string;
header: string;
dropdownSettings: IDropdownSettings;
}
#Component({
selector: 'app-multi-dropdown',
templateUrl: './multi-dropdown.component.html',
styleUrls: ['./multi-dropdown.component.scss']
})
export class MultiDropdownComponent implements OnInit {
#Input() dropdownItems: any[];
#Input() selectedItems;
#Input() header: string;
#Input() placeholder: string;
#Input() dropdownSettings: IDropdownSettings;
#Input() loading;
#Output() itemSelectEvent = new EventEmitter();
#Output() itemDeselectEvent = new EventEmitter();
#Output() selectAllEvent = new EventEmitter();
#Output() deselectAllEvent = new EventEmitter();
#Output() selectedItemsChange = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
onSelectItem(event) {
this.selectedItemsChange.emit(this.selectedItems);
}
onDeselectItem(event) {
this.selectedItemsChange.emit(this.selectedItems);
}
onSelectAll(event) {
this.selectedItemsChange.emit(this.selectedItems);
}
onDeselectAll(event) {
this.selectedItemsChange.emit(this.selectedItems);
}
}
in child.component.html:
<div class="multi-dropdown-item">
<div class="multi-dropdown-header">{{header}}</div>
<div *ngIf="!this.loading" class="multi-dropdown-body">
<ng-multiselect-dropdown
[placeholder]="placeholder"
[data]="dropdownItems"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onSelectItem($event)"
(onDeSelect)="onDeselectItem($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeselectAll($event)">
</ng-multiselect-dropdown>
</div>
</div>
Then in parent.component.html:
<app-multi-dropdown
[loading]="filterPropertiesMap.get(filterEntry).loading"
[dropdownItems]="filterPropertiesMap.get(filterEntry).items"
[(selectedItems)]="filterPropertiesMap.get(filterEntry).selectedItems"
[dropdownSettings]="filterPropertiesMap.get(filterEntry).setting"
[placeholder]="filterPropertiesMap.get(filterEntry).name"
[header]="filterPropertiesMap.get(filterEntry).name"
(itemSelectEvent)="onItemSelect($event)"
(itemDeselectEvent)="onItemDeselect($event)"
(selectAllEvent)="onSelectAll($event)"
(deselectAllEvent)="onDeselectAll($event)"
></app-multi-dropdown>
in parent.component.ts I didn't do anything but log:
onItemSelect($event) {
console.log("onItemSelect");
}
onItemDeselect($event) {
console.log("onItemDeselect");
}
onSelectAll($event) {
console.log("onSelectAll");
}
onDeselectAll($event) {
console.log("onDeselectAll");
}
in above code filterPropertiesMap defines settings.
You may see that what I am doing is in child component, I created eventemitters for select, deselect, and in the function I emitt this.selectedItems.
But I don't think this is a good way to implement this, and actually, it doesn't work well.
sometimes, when I select or deselect, it doesn't changed immediately.
So how to implement this? when I select deselect, selectAll, deselectAll. my parent component can react immediately and correctly.
Also the weird thing is: when I load the page, I will have some default values chose, for example 6,7,8,9. Then I select all and it still 6,7,8,9. and then after that I deselect all agin select all, the field will change to all(for example 1,2,3,4,5,6,7,8,9). Does event emitter has delay or will ignore some choices??
Edit:
I tried to extract all the necessary snippets of code to build a project here:
https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing
I hope when I all the event(select, deselect, selectAll, deselectAll) can be emitted and received by parent component
sorry one mistake: the app-multi-dropdown tag in parent component should be app-child

You can use it as part of an Angular reactive form, and just emit every time it value changes.
The HTML of the child component could be something like this:
<form [formGroup]="myForm">
<ng-multiselect-dropdown
name="dropdownItems"
[settings]="dropdownSettings"
[placeholder]="placeholder"
[data]="dropdownItems"
formControlName="dropdownItems">
</ng-multiselect-dropdown>
</form>
And the .ts file:
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { FormGroup, FormBuilder } from '#angular/forms';
import { Component, OnInit, Input, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
#Input() placeholder: string;
#Input() defaultValues: any[];
#Input() dropdownItems: any[];
#Input() dropdownSettings: IDropdownSettings;
#Output() onDropdownChange = new EventEmitter();
myForm: FormGroup;
constructor(
private _fb: FormBuilder
) { }
ngOnInit(): void {
this.myForm = this._fb.group({
dropdownItems: ['']
});
// Set default values as real values
this.onDropdownChange.emit(this.defaultValues);
this.myForm.valueChanges.subscribe(val => {
this.onDropdownChange.emit(val.dropdownItems)
})
}
}
EDIT: Based on your last update:
With the code you updated and my peace of code, I build this functional project running on stackblitz: https://stackblitz.com/edit/angular-ivy-g7w3dz
Hope I got the logic properly

you haven't set up your emitter properly. do this:
#Output()selectAllEvent = new EventEmitter<any>();
onSelectAll(event) {
this.selectAllEvent.emit(this.selectedItems);
}
then on the parent:
<app-multi-dropdown
(selectAllEvent)="onSelectAll($event)"
></app-multi-dropdown>

Angular component isnt passing data before the child component is loaded

In my code, I have a component that holds all the data retrieved from firebase. Including a variable called "currentTurnName" which gets passed from the parent to the child component. That variable is used to render a twitch channel inside the child component but doesn't update when the data changes.. I followed a few stack overflow guide that talk about using the *ngIf directive like <childComponent *ngIf"currentTurnName"> to stop the child component from loading until the data is retrieved- it works on page load, except it doesn't work when that variable is passed in new data asynchronously.
Child Component
export class TwitchVideoComponent implements OnInit {
constructor() {
}
player: any;
#Input() currentTurnName: any;
ngOnInit(): void {
var options = {
width: 1080,
height: 720,
channel: this.currentTurnName,
};
this.player = new Twitch.Player("<player div ID>", options)
this.player.setVolume(0.5);
console.log(this.currentTurnName);
}
// ngOnChanges(changes: SimpleChanges) {
// if (this.currentTurnName) {
// this.player.setChannel(this.currentTurnName);
// }
// }
}
Child Template
<div id="<player div ID>" class="twitch"></div>
Parent component
export class GameRoomComponent implements OnInit {
public users$: Observable<User[]>
currentUser: Observable<CurrentUser[]>;
constructor(private usersService: UsersService, private afs: AngularFirestore) {
this.currentTurn = afs.collection<CurrentUser>('currentPlayerDB').valueChanges().pipe(
tap(res => {
this.currentTurnName = res[0].user;
console.log(this.currentTurnName);
})
).subscribe();
}
currentTurn: any;
items: any;
currentTurnName : any;
Parent Template
<app-twitch-video *ngIf="currentTurnName"
[currentTurnName]="currentTurnName" >
This somewhat talks about my issue, but mine is more complex considering the data is changed
Angular 2 child component loads before data passed with #input()

You could use Angular's property setters. The documentation can be found here in this section (Intercept input property changes with a setter): https://angular.io/guide/component-interaction
Here is a snippet using your code:
export class TwitchVideoComponent implements OnInit {
constructor() {}
player: any;
#Input() set currentTurnName(name) {
this._currentTurnName = name;
console.log('This should fire every time this Input updates', this._currentTurnName);
if (this._currentTurnName) {
this.player.setChannel(this._currentTurnName);
}
}
public _currentTurnName: any;
ngOnInit(): void {
var options = {
width: 1080,
height: 720,
channel: this._currentTurnName,
};
this.player = new Twitch.Player("<player div ID>", options)
this.player.setVolume(0.5);
console.log(this._currentTurnName);
}
}

Understanding Parent - Child communication Angular

I have a component and then another component which is using it, and data is being parsed through to each other by means of a tab changing, what I am trying to do is when the page is left but the back button is pressed that the tab is remembered, to be able to do it I need to understand the data flow, the functions are identical so It's difficult to determine what is going on!
For instance, they are both using #Input and when I press a tab, both functions console if I add one in?
the component:
<div class="EngagementNavigationSecondary-Items"
*ngIf="!selectedIndividual">
<span
*ngFor="let item of navList; let i = index"
class="EngagementNavigationSecondary-Item"
[ngClass]="{
'EngagementNavigationSecondary-Item--Active': selectedItem === i,
'EngagementNavigationSecondary-Item--One' : navList.length === 1,
'EngagementNavigationSecondary-Item--Two' : navList.length === 2,
'EngagementNavigationSecondary-Item--Three' : navList.length === 3
}"
(click)="clickTab(i)">
{{ item.title | translate }}
</span>
</div>
<div *ngIf="selectedIndividual">
<span class="EngagementNavigationSecondary-Item" (click)="goBack()">
<tl-icon
size="18"
name="chevron-left">
</tl-icon>
{{ 'Go back' | translate }}
</span>
</div>
the logic:
export class EngagementNavigationSecondaryComponent implements OnInit {
#HostBinding('class.EngagementNavigationSecondary') block = true;
#Input() navList: EngagementNavigationItem[];
#Input() selectedItem: number = 0;
#Input() selectedIndividual: string;
#Output() change: EventEmitter<number> = new EventEmitter<number>();
#Output() deselectIndividual: EventEmitter<boolean> = new EventEmitter<boolean>();
className: string;
ngOnInit() {
this.className = `EngagementNavigationSecondary-Item${this.navList.length}`;
}
goBack() {
this.deselectIndividual.emit(true);
}
clickTab($event: number) {
this.selectedItem = $event;
this.change.emit($event);
}
}
and now this component being used - within the side container component:
<tl-engagement-navigation-secondary
*ngIf="navList"
[navList]="navList"
[selectedItem]="selectedTab"
[selectedIndividual]="selectedIndividual"
(change)="tabChange($event)"
(deselectIndividual)="selectedIndividual = undefined">
</tl-engagement-navigation-secondary>
logic:
export class EngagementSideContainerComponent implements OnChanges, OnInit {
#Input() focus: EngagementGraphNode;
#Input() selectedTab: number;
#Output() change: EventEmitter<number> = new EventEmitter<number>();
public navList: EngagementNavigationItem[];
public selectedIndividual: EngagementUser;
constructor(
private urlService: UrlService,
private router: Router,
private mixPanelService: MixPanelService,
private engagementService: EngagementService
) { }
ngOnInit() {
this.navList = this.getNavList();
}
tabChange(event) {
this.change.emit(event);
}
as you can see they are basically identical, so when I click on a tab, is the original component being called and then this is parsing data to the side container component? I think its important to understand so I can actually create the solution.
thanks if you can help!

Get boolean indicating which route is active [Angular 2]

I have an app.component.ts component which template contains several tab components, each one containing a particular link:
app.component.html:
<h1>Tabs container</h1>
<div>
<nav>
<tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link" (eventEmitter)="closeTabEvent($event)"></tab>
</nav>
</div>
<div>
<router-outlet></router-outlet>
</div>
The HTML template of the tab component is tab.component.html:
<a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>
<button *ngIf="tabIndex > 0" (click)="closeTab('tabToCloseKey')">Close tab</button>
I'm looking for a way to get a boolean value inside my TabComponent class, indicating which route is active.
Here is my TabComponent class:
export class TabComponent implements OnInit {
#Input() name: string;
#Input() link: string;
#Input() param: string;
targetArray: Array<any>;
#Output() eventEmitter = new EventEmitter<[number, boolean]>();
// #Output() isActiveEmitter = new EventEmitter<boolean>();
static lastTabIndex: number = 0;
tabIndex: number = 0;
isActive: boolean = true;
// #ViewChild('routerLinkActive') a;
// el: HTMLElement;
// className: string;
constructor(private router: Router, private sharedService: SharedService, private _elRef: ElementRef) {}
ngOnInit() {
// this.className = this._elRef.nativeElement.find('a').className;
// this.className = this.el.className;
this.tabIndex = TabComponent.lastTabIndex;
// console.log(this.className);
TabComponent.lastTabIndex++;
}
closeTab(){
console.log('tab closed at index: ' + this.tabIndex);
let tuple: [number, boolean];
tuple = [this.tabIndex, this.isActive];
this.eventEmitter.emit(tuple);
this.hideTabComponent();
}
hideTabComponent(){
console.log('Hiding component');
}
}
I would to store the information indicating if the route corresponding to the tab is active or not in the isActive boolean attribute of this typescript class.

You can use route param in the routerLink in the tab link so that you can catch that value in the Class with ActivatedRoute as mentioned in the Angular doc: