Using @HostBinding based on the @Input() condition

Question

Using @HostBinding based on the @Input() condition

I'm attempting to link the CSS class foo to my parent component by utilizing @HostBinding based on a condition I evaluate against a dynamic variable. However, I am struggling to get it to function as expected.
Here are the different approaches I have already tested:

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public isFoo: Boolean = this.checkIfCorrectInput();

    constructor() {
    }

    private checkIfCorrectInput(){
        return (this.input != 'not correct');
    }
}

Is there a method I could use to make this work? Perhaps listening for changes in the input value?

angular typescript angular2-hostbinding

Answer 1

Answer №1

One possible solution is to create a getter and setter for the @Input property and use the setter to set the isFoo variable accordingly.

export class MyComponent {   
     @Input()
        public get input (): string {
          return this._input;
        }
        public set input (val: string) {
          this._input = val;
          // check the input value and set isFoo accordingly
          this.isFoo = (val !== 'not correct');
        }

        @HostBinding('class.foo')
        public isFoo: Boolean = false; // initialize as false

        constructor() {
        }
    }

Answer 2

One possible solution is to create a getter and setter for the @Input property and use the setter to set the isFoo variable accordingly.

export class MyComponent {   
     @Input()
        public get input (): string {
          return this._input;
        }
        public set input (val: string) {
          this._input = val;
          // check the input value and set isFoo accordingly
          this.isFoo = (val !== 'not correct');
        }

        @HostBinding('class.foo')
        public isFoo: Boolean = false; // initialize as false

        constructor() {
        }
    }

Answer 3

Answer №2

You're on the right track with your approach:

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public get isFoo(): Boolean {
        return this.input !== 'not completely accurate';
    }

}

Answer 4

You're on the right track with your approach:

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public get isFoo(): Boolean {
        return this.input !== 'not completely accurate';
    }

}

Using @HostBinding based on the @Input() condition

Answer №1

Answer №2

Similar questions

What are the steps for creating and deploying a project that utilizes asp.net core on the server-side and Angular on the client-side

Limit the implementation of Angular Material's MomentDateAdapter to strictly within the confines of individual

Global Enum in Typescript that is Optimized for Inlining during Compilation

Leverage React components for efficient code reuse and export modules for

Exploring NestJs: The Importance of DTOs and Entities

Updating a boolean value when the checkbox is selected

Troubleshooting CORS problem: Angular 2 and AspNetCore WebApi encounter error with preflight response having invalid HTTP status code 401

Error: The specified path in the MEAN stack must be either a string or Buffer

Error message: "Using AngularFire 2 caused an issue as Firebase is not identified as a

Using Observable and EventEmitter to efficiently transfer data between parent and child components in Angular

How to fix the "Module parse failed" issue when importing MP3 files in NextJS 14 TypeScript?

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

What causes the canLoad function to create an endless loop when rerouting?

Establish a permanent code folding feature in the Monaco editor for enhanced text organization

Showing error messages in Angular when a form is submitted and found to be invalid

Can you explain the execution process of this Http.post method and provide details about the code path it follows

Creating a layered image by drawing a shape over a photo in Ionic using canvas

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

Having trouble displaying child nodes in MatTreeView with Angular 14?

The ng2-chart library displays date in the form of a Unix timestamp