Good day! I'm currently facing an issue with viewchild, as it's unable to locate my selector in the HTML code. The objective is to find my 'field' selector in the HTML, clone it, and add a new class to it every time a button is clicked. To achieve this, I intended to utilize renderer 2. Below is my HTML snippet:
<ng-template #effacer4>
<div *ngIf="Next3"><div #Champ>
<div class="Champ" [ngClass]="Champ">
<h1 class="title"> Mortgage(s) to be insured </h1><br>
<h2>Type of mortgage</h2>
<select class="form-select" aria-label="Default select example">
<option value="1">Conventional mortgage (amortizable)</option>
<option value="2">In fine</option>
<option value="3">Zero Rate Loan</option>
<option value="4">Bridge loan</option>
</select> <br>
<h2>Loan amount</h2>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00 €</span>
</div>
<h2>Loan rate</h2>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">%</span>
</div>
<h2>Total duration</h2>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">yr(s)</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">months</span>
</div>
<h2>Including deferred</h2>
<select class="form-select" aria-label="Default select example">
<option value="1">1 month</option>
<option value="2">2 months</option>
<option value="3">3 months</option>
<option value="4">4 months</option>
<option value="5">5 months</option>
<option value="6">6 months</option>
<option value="7">7 months</option>
<option value="8">8 months</option>
<option value="9">9 months</option>
<option value="10">10 months</option>
<option value="11">11 months</option>
<option value="12">12 months</option>
<option value="13">13 months</option>
<option value="14"``">>14 months</option>
<option value="15">15 months</option>
<option value="16">16 months</option>
<option value="17">17 months</option>
<option value="18">18 months</option>
<option value="19">19 months</option>
<option value="20">20 months</option>
<option value="21">21 months</option>
<option value="22">22 months</option>
<option value="23">23 months</option>
<option value="24">24 months</option>
</select>
</div>
</div></div>
<button (click)="Clone()"class="btn btn-secondary btn-lg"><fa-icon [icon]="faPlusSquare"></fa-icon> Add an insured loan</button>
</ng-template>
And here is the corresponding TypeScript code:
import { Component,ViewChild, ElementRef,Renderer2,AfterViewInit } from '@angular/core';
import {faFileContract,faChartLine,faCalculator,faBuilding,faHome,faMapMarkedAlt,faChess,faChessKing,faPlusSquare } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-questionnaire',
templateUrl: './questionnaire.component.html',
styleUrls: ['./questionnaire.component.css'],
})
export class QuestionnaireComponent implements AfterViewInit{
faFileContract=faFileContract;
faChartLine=faChartLine;
faCalculator=faCalculator;
faBuilding=faBuilding;
faHome=faHome;
faMapMarkedAlt=faMapMarkedAlt;
faChessKing=faChessKing;
faChess=faChess;
faPlusSquare=faPlusSquare;
button: boolean = true;
SUIVANT:boolean=true;
Next:boolean=true;
Next2:boolean=true;
Next3:boolean=true;
dynamic=0;
Champ!: HTMLDivElement;
@ViewChild('Champ')ChampViewChild!: ElementRef;
constructor(private _renderer: Renderer2) {}
Clone() {
console.log("Button clicked!");
this._renderer.addClass(this.ChampViewChild.nativeElement, 'Champ');
let clonedChamp = this._renderer.createElement(this.ChampViewChild.nativeElement.tagName);
this._renderer.addClass(clonedChamp, 'Champ');
this._renderer.appendChild(this.ChampViewChild.nativeElement, clonedChamp);
}
ngAfterViewInit() {
if (this.ChampViewChild) {
this.Clone();
}
}
incrementProgress() {
this.dynamic += 5;
};
}
No errors are being displayed in my terminal.