i have a question about DOM replacing with angular. When i click on my button i passed $event. My objective is replace the button childrens with another div with text.
Can you help me please?
<button
type="button"
class="btn LG_btn-grey animated"
(click)="onSubmitResendEmail(user.email, $event);sharedService.getCurrentURL()">
<app-icons-renderer
[name]="'sendEmail'">
</app-icons-renderer>
</button>
You can give your button a Template Variable. Then in your Class, access it using @ViewChild. Then use Renderer2 to add children to it.
Here's an example of a Button that adds new Content inside it using this.
Component Class
import { Component, ViewChild, Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('myButton') myButton: ElementRef;
constructor(private renderer: Renderer2) {}
clickHandler() {
const div = this.renderer.createElement('div');
const text = this.renderer.createText('Some text in div');
this.renderer.appendChild(div, text);
this.renderer.appendChild(this.myButton.nativeElement, div);
}
}
Template
<button
#myButton
type="button"
class="btn LG_btn-grey animated"
(click)="clickHandler()">
<p>Some content</p>
</button>
If you have some HTML in the form of a string that you want to set as the content of the button,
import { Component, ViewChild, Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('myButton') myButton: ElementRef;
constructor(
private renderer: Renderer2
) {}
newContent = `<div>Some text in div</div>`;
clickHandler() {
this.renderer.setProperty(this.myButton.nativeElement, 'innerHTML', this.newContent);
}
}
@ViewChildren in that case.
Why don't you have flag value that will tell you which element is visible, something like:
<button>
<app-icons-renderer [style.visibility]="isEmailSent ? 'hidden' : 'visible'" [name]="'sendEmail'">
</app-icons-renderer>
<app-icons-renderer [style.visibility]="isEmailSent ? 'visible' : 'hidden'" [name]="'sentEmail'">
</app-icons-renderer>
</button>
You can change isEmailSent value with your Button click event.
Update: Not sure if this will keep space occupied, better option could be to use
<app-icons-renderer *ngIf="isEmailSent"
<app-icons-renderer *ngIf="!isEmailSent"
