Angular : Access ngClass function from parentComponent in childComponent

Monir Khan
1 min readOct 7, 2020

Scenario: We want to acccess an validation function located in parentComponent from childcomponent.

Step 1 : Create childComponent and declare input() that takes the function referense as parameter.

selector : ['c-child-component']
@Component
export class childComponent{
input() validationFunctionFromParent: any;
}
<button [ngClass]=”validationFunctionFromParent”>

Step 2: From the parentComponent pass the function to childComponent

<c-child-component [validationFunctionFromParent]="testValidationFunction()">
</c-child-component>
testValidationFunction(){
return {
btn: condition ? true: false,
‘btn-primary’: true,
‘btn-extra-class’: this.someBooleanVariable
};
}

--

--