lundi 20 juin 2022

How to get a checkbox in Angular?

My code looks somewhat like this.

<div class="inputgrid">
    <label for="visualizationInput"> Visualization server address </label>
    <input id="visualizationInput" matInput type="text" name="visualization" [value]="server"
        (input)="server = $event.target.value">
    <label for="lookupInput"> Assembly service address </label>
    <input id="lookupInput" matInput type="text" name="lookup" [value]="lookup" (input)="lookup = $event.target.value">
    <label for="gatewayInput"> API gateway address </label>
    <input id="gatewayInput" matInput type="text" name="gateway" [value]="gateway"
        (input)="gateway = $event.target.value">
    <mat-checkbox [checked]="gltf"> Activate GLTF Data Format </mat-checkbox> 
</div>

And on the typescript end, my code looks somewhat like this.

constructor(public settingsDialogRef: MatDialogRef<SettingsDialog>, public asmLoadServ: AssemblyFetchService, public engServ: EngineService) { }

    onNoClick(): void {
        this.settingsDialogRef.close();
    }

    public ngOnInit(): void {
        this.server = this.asmLoadServ.serverAddress;
        this.lookup = this.asmLoadServ.customLookupAddress;
        this.gateway = this.asmLoadServ.customGatewayAddress;
        this.gltf = this.engServ.isGLTF;
    }

    public updateAddresses(): void {
        this.asmLoadServ.customLookupAddress = this.lookup;
        this.asmLoadServ.customGatewayAddress = this.gateway;
        this.asmLoadServ.serverAddress = this.server;
        this.engServ.isGLTF = this.gltf;
        this.settingsDialogRef.close();
    }

I added the at the end and the subsequent value for the same will be value of gltf in typescript which is a boolean. In a different file, if the value of 'gltf' is marked as true, a different function is invoked. Now that I have explained what I intend on doing, I just wanted to know how to properly make the checkbox in this regard? All help will be appreciated. I am very new in coding so this question might appear trivial but it would mean a lot if it's answered with the exact code. :)




Aucun commentaire:

Enregistrer un commentaire