Home How to set an Angular2/4 Class Variable via html
Reply: 0

How to set an Angular2/4 Class Variable via html

user1918
1#
user1918 Published in May 21, 2018, 3:09 am

I am trying to set an Angular2 Class Variable via html. This is what I've Tried The problem is that although the value gets set via

<div class="row" *ngVar="client.clientName as clientName">

It doesn't keep the value on the loop. It's only seems to have a value after the declaration.

Directive

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';
@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: any) {
        this.context.$implicit = this.context.ngVar = context;
        this.updateView();
    }

    context: any = {};

    constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

    updateView() {
        this.vcRef.clear();
        this.vcRef.createEmbeddedView(this.templateRef, this.context);
    }
}

Component

    @Component({
    selector: 'details', 
    template: `      
                <div class="row" *ngVar="'' as clientName">                        
                <ng-template *ngIf="clients.length" ngFor [ngForOf]="clients" let-client>
                aaaaaaaaa|{{clientName}}|aaaaaaaa                   
                    <div class="row" *ngIf="clientName != client.clientName">
                        <div>                               
                            <div class="row" *ngVar="client.clientName as clientName">
                                bbbbbbbb|{{clientName}}|bbbbbbbbb                           
                            </div>  
                        </div>
                    </div>
               </ng-template> 
               </div>        
    `    
})
export class ComponentName {
    className: string = "";
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.303616 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO