share data between sibling components while both of them use *ngIf - javascript

So I have a parent component, that hosts 2 sibling components.
something like this
<div *ngif="somecode()">
<sibling1>
</sibling1>
</div>
<div *ngif="somecode()">
<sibling1 [dataParams]=sibling1object.somedata>
</sibling1>
</div>
so I get the error that sibling1object.somedata is undefined but when I remove ngIf() from 1st div, the error disappears.
It doesn't matter if *ngIf resolves to true or false. so i get the error even when sibling1 successfully loads.

Use [hidden]="!somecode()" instead of *ngIf="somecode()"

Please add following code in parent.component.ts
public siblingOneLoaded: boolean = false;
ngOnDestroy(): void {
if (sibling1object.somedata) {
this.siblingOneLoaded = true;
}
}
Add following code to html file
<div *ngIf="siblingOneLoaded">
<sibling1 [dataParams]=sibling1object.somedata>
</sibling1>
</div>

Related

Is there an Angular way of doing: document.getElementById(id).style.display = "none";

I have a div with the id of 1. I'm trying to set the display to none dynamically. Is there an Angular way of doing this. Currently, I'm using vanilla javascript. I was asking about doing this dynamically because there will be over 60 divs that will be created from an array.
In my html
<div *ngFor="let item of items; i = index;">
<div id={{i}} (click)=hideDiv()></div>
</div>
In my method
hideDiv() {
return document.getElementById('1').style.display = "none";
}
That works but I'm looking for the Angular way of doing the above.
It was suggested that I use #ViewChild. Here's what I've changed. I can't use a Template Reference Variable as the html divs are created dynamically. Unless someone can let me know how to create the template variables dynamically. Although I don't think it's possible to create template variables with a loop.
#ViewChild('imgId', { static: true }) elementRef: ElementRef<HTMLDivElement>;
imgId: string;
Then in the method I have:
this.imgId = event.path[0].attributes[1].value;
this.elementRef.nativeElement.style.display = "none";
The event.path[0].attributes[1].value gets me the id of the image. The imgId shows when I console log it. It's still not changing the display on the div to none. Also I'm getting the error:
Cannot read properties of undefined (reading 'nativeElement')
Yes, you can use the ViewChild query in Angular to do this. In your component, define a query like this:
#ViewChild('#1') elementRef: ElementRef<HTMLDivElement>;
Implement the AfterViewInit interface in your component, and inside it, use this:
this.elementRef.nativeElement.style.display = "none";
You can simply use ngIf for this
Component
shouldDisplay: boolean = true;
hide(): void {
this.shouldDisplay = false;
}
show(): void {
this.shouldDisplay = true;
}
Html
<button (click)="hide()">Hide</button>
<button (click)="show()">Show</button>
<div *ngIf="shouldDisplay">this is the content</div>
Here is the working example
This is the Angular way:
template
<div *ngIf="showMe"></div>
or
<div [hidden]="!showMe"></div>
TypeScript:
showMe: boolean;
hideDiv() {
this.showMe = false;
}
For dynamic items where your don't know how many you will get the best approach would be to add a directive that would store and adjust that for you:
#Directive({ selector: '[hide-me]' })
export class HideDirective {
#Input() id!: string;
#HostBinding('style.display')
shouldShow: string = '';
}
then in your component just address them by ID:
#Component({
selector: 'my-app',
styleUrls: ['./app.component.css'],
template: `
<div *ngFor="let item of items; let index = index;">
<div hide-me id="{{index}}" (click)="hideDiv(index)">Some value</div>
</div>
`,
})
export class AppComponent {
#ViewChildren(HideDirective) hideDirectives!: QueryList<HideDirective>;
items = [null, null, null];
hideDiv(id: number) {
this.hideDirectives.find((p) => p.id === id.toString()).shouldShow = 'none';
}
}
Stackblitz: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts
An angular official example: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts
How about passing the div reference to the hideDiv method directly in the Dom using a template variable like this.
<div *ngFor="let item of items; i = index;">
<div #divElement (click)=hideDiv(divElement)></div>
And in your hide div method you will have access to the element directly
hideDiv(div) { div.style.display = "none";}
Here is a Stackblitz example
https://stackblitz.com/edit/angular-ivy-w1s3jl
There are many ways to do this, but in my opinion this is a simple solution the achieves your goal with less code.
PS:
It is always recommended to use the angular Renderer2 to manipulate Dom elements. This service has the method setStyle which you can use for your code.

Vue Refresh page with realtime data

I'm building some app using Laravel & Vue, and so far so good, but I'm no expert with Vue.
So I have one very "begginers" problem, using live data.
So I want to make button that will check if live data is on or off, and if they turn it on, it must refresh data and set liveData state to true.
For example:
This is my "button" and it's not working as expected, It will change state but data is still no live
<div v-if="liveData">
<div #click="liveData = false">
Turn OFF Live data
</div>
</div>
<div v-else="liveData">
<div #click="liveData = true">
Turn On Live data
</div>
</div>
I have defined state like so:
data() {
return {
liveData: false
}
},
And this is my created() function:
created() {
if(this.liveData){
window.Echo.channel("addOrder").listen(".order-created", (order) => {
this.$store.commit("ADD_ORDER", order);
});
}
this.$store.dispatch("GET_ORDERS");
},
So in this case only button is not working, but if I set state to true it's working perfectly.
What do I need to do here? Do I need to make new function to work or?
Created will only be executed once in your component lifecycle. At this point the value of liveData is always false.
If you click on your "button" the value should change but your code inside of created will not be executed once more.
Instead of created you can use an immediate watcher:
watch: {
liveData: {
immediate: true,
handler(val) {
// your code from created here
}
}
Correct the mistake
<div v-else!="liveData">
<div v-if="liveData">
<div #click="liveData = false">
Turn OFF Live data
</div>
</div>
<div v-else!="liveData">
<div #click="liveData = true">
Turn On Live data
</div>
</div>
or
<div v-else>

Wait for querySelectorAll

I am developing an app via Ionic Framework. I upgraded my app from Ionic 3 to Ionic 4. Now hyperlinks do not work anymore. The HTML content is loading dynamically based on the chosen page.
I've read I have to set new eventListeners for my clicks on my a elements.
I am trying:
ngOnInit()
{
this.objAnswerService.getAntworten(objFrage).then(arrAnswer =>
{
this.arrAnswers = arrAnswer;
}
}
ngAfterViewInit()
{
console.log('_enableDynamicHyperlinks');
this._enableDynamicHyperlinks();
}
private _enableDynamicHyperlinks()
{
let arrUrls = this._element.nativeElement.querySelectorAll('a');
console.log(JSON.stringify(arrUrls)); // No elements
console.log(arrUrls); // Correct elements
arrUrls.forEach((objUrl) =>{
console.log('do something'); // Never reached because 0 elements
});
}
answer.page.html
<div *ngIf="arrAnswers">
<div *ngFor="let objAnswer of arrAnswers"
class="antworten">
<div *ngIf="objAnswer"
class="antwort">
<div [innerHTML]="safeHtml(objAnswer.strText)"></div>
</div>
</div>
</div>
How can I wait for querySelectorAll() to find all existing elements?
since this.arrAnswers is initialized in a Promise it is undefined when the component fiirst loads. As a result of this <div *ngIf="arrAnswers"> evaluates to false and there are no elements for querySelectorAll to return on ngOnInit or ngAfterViewInit because they both gets called once during component lifecycle.
what you need is ngAfterViewChecked to be called when this.arrAnswers is initialized and dom is updated.
ngAfterViewChecked() {
console.log('_enableDynamicHyperlinks');
if (!this._element) return;
let arrUrls = this._element.nativeElement.querySelectorAll('p');
console.log("arrUrls.length:", arrUrls.length);
console.log("arrUrls:", arrUrls);
}
also do not forget to use { static: false } on #ViewChild as explained here.
here is a simple demo
The better way to handle this is using angular lifecycle hook.
If it doesn't work with ngOnInit() you can take a look at ngAfterViewInit()which respond after Angular initializes the component's views and child views / the view that a directive is in.
ngAfterViewInit() {
let arrUrls = this._element.nativeElement.querySelectorAll('a');
console.log(JSON.stringify(arrUrls)); // No elements
console.log(arrUrls); // Correct elements
arrUrls.forEach((objUrl) =>{
console.log('do smthng'); //Never reached because 0 elements
});
}

Angular 6 [ngClass] not working with boolean in component.js

What I'm trying to do is hide text when ngState is true. When a certain element is clicked, that state is set to true. The [ngClass] should then add the hide class and hide the text. This first snippet is from the component.ts which outlines the boolean variable and the function which sets it to true.
export class MainMenuComponent implements OnInit {
ngState = false;
constructor() {
}
newGame(){
this.ngState = this.ngState === true ? false : true;
console.log(this.ngState);
}
}
This next snippet is the component html
<canvas id='sparkCanvas'></canvas>
<div class="menuBox">
<div class="title" [ngClass]="{'hide': ngState}">Dark Shards</div>
<div class="optContainer">
<ul>
<li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{'hide': ngState}" (click)="opt.f()">{{opt.n}}</li>
</ul>
</div>
</div>
and here is the hide class below
.hide{
opacity: 0;
}
When I replace [ngClass]="{'hide': ngState}" with [ngClass]="{'hide': true}"
It will then work as intended. What am I not understanding here?
Here is a link to my code with a working example:
https://stackblitz.com/edit/angular-fg48ro?file=src%2Findex.html
Try without Quote
<li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{hide: ngState}" (click)="opt.f()">{{opt.n}}</li>
EDIT
When i see your code, the issue is not related to angular, but with javascript context, you need to specifiy the context of this like
' f: this.newGame.bind(this),'
DEMO

Get children of parent element after ngIf (Angular 5)

I am trying to grab all the input elements that only exist after a boolean becomes true. So the div is wrapped around an *ngIf. I tried grabbing the elements using plain JavaScript, but it keeps returning empty. Here is my code:
test.component.html
<mat-checkbox (change)="toggleTest($event)">
Test check box
</mat-checkbox>
<div class="form-area" *ngIf="isTestChecked">
<input type="number">
<input type="text">
</div>
test.component.ts
isTestChecked = false;
toggleTest(event: any) {
this.isTestChecked = event.checked;
if (this.isTestChecked === true) {
const children = document.querySelectorAll('.form-area input');
console.log(children);
}
}
So the console.log always prints an empty array. However, if I manually type the query selector in the browser console after setting the boolean to true, then it returns both of the input elements.
What am I doing wrong? How come it won't get the input elements after they become added to the DOM? Any help would be appreciated!
Do not access the DOM this way. The Angular way is using ElementRef.
Take a look, too, at those threads that explain how to use:
Angular 2 #ViewChild in *ngIf
private contentPlaceholder: ElementRef;
#ViewChild('contentPlaceholder') set content(content: ElementRef) {
this.contentPlaceholder = content;
}
<div #contentPlaceholder *ngIf="isTestChecked">
<input type="number">
<input type="text">
</div>
Angular updates the DOM asynchronously, so you can't access the updated DOM elements in the same event loop. If you really need to manipulate the DOM directly, try add a timeout before the query selection.
this.isTestChecked = event.checked;
setTimeout(() => {
if (this.isTestChecked === true) {
const children = document.querySelectorAll('.form-area input');
console.log(children);
}
})

Categories

Resources