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

The build script does not execute during the creation of a Node.js and React application in Visual Studio

Managing errors in ErrorHandler and addressing them in HttpInterceptor

Verify if an object property is called with the toHaveBeenCalledWith() function in Jasmine

Tips for emptying the search field in primeng multiselect widget

What steps can be taken to resolve the error message "Using 'null' as an index type is not allowed."?

The conflict arises when importing between baseUrl and node_modules

Angular: Observing DOM changes through observables

Customize the text for the material icon

Ensuring Commitments in the ForEach Cycle (Typescript 2)

Linking Angular 2 Production Mode to the vendor directory

``Is it possible to iterate through a collection of objects using a loop?

Angular's mechanism for detecting changes in a callback function for updates

Creating a JSON structure using an array in Typescript

What steps can be taken to ensure that the requestAnimationFrame function does not redraw the canvas multiple times after a button click?

The process of automatically formatting Typescript has transformed into an unfortunate auto-discarding action

Express.js Router does not recognize the term 'this'

To set up Ionic on your project, run the command `npm install

Issue with Material UI v5: "spacing" property not found on custom theme object

The type 'TaskListProps[]' cannot be assigned to type 'TaskListProps'

What is the reasoning behind ngOnInit not being the initial lifecycle hook in Angular?