CODEWITHSUNDEEP
angulartypescript
Tanzeel
Tanzeel

Reputation: 5008

How to bind to a property in some other component

I'm new to Angular. This is the first time I'm trying something like this. I don't know whether it is doable or not.

I have an Apply button in Timeselector (my custom component) which is enabled or disabled on the basis of validation happening in Monthpicker (my another custom component). Right now I'm doing this:

timeselector.component.html

<button class="btn btn-primary" (click)="apply()" [disabled]="!isValid">

timeselector.component.ts

isValid: boolean= true;
...
@ViewChild(MonthpickerComponent) monthpicker: MonthpickerComponent;
...
ngOnInit(): void {
  this.isValid=this.monthpicker.isValidRange;  
}

But this happens on ngOnInit only. There's no other method which is called from monthpicker. What should I do?

Here's my monthpicker.component.ts

isValidRange: boolean= true;
...
validate(sDate: string, eDate: string) {
    this.isValidRange=true;
    ...
    if (...) {
        this.isValidRange=false;
    }
    if (...) {
        this.isValidRange=false;
    }
    if (//all good) {
        this.isValidRange=true;
    }
}

isValidRange is set to true based on some conditions. Is there anyway that I can bind that apply button directly to isValidRange? Is it possible:

<button class="btn btn-primary" (click)="apply()" [disabled]="monthpicker.!isValidRange">

If this question needs more details then please let me know. I'll quickly create a stackblitz.

Upvotes: 0

Views: 48

Answers (1)

zmag
zmag

Reputation: 8251

There's nothing wrong with Angular things but with JavaScript syntax.

! operator cannot be used directly on the property. You need to place ! on the very left of the variable name.

Try [disabled]="!monthpicker.isValidRange".

<button class="btn btn-primary" (click)="apply()" [disabled]="!monthpicker.isValidRange">

Upvotes: 2

Related Questions