Trying to pass Boolean value from child component to parent component

Child Component:

import { Component} from '@angular/core';

@Component({
selector: 'app-test',
templateUrl: './app-test.component.html',
styleUrls: ['./app-test.component.scss']
})
export class TestComponent implements OnInit {

testBoolean: boolean;

constructor() { }
}


Parent Component

.html

<app-test [testBoolean]="testBoolean"></app-test>
<button (click)="onClick()"></button>


.ts

import { Component, Input} from '@angular/core';

@Component({
selector: 'app-test1',
templateUrl: 'app-test1.component.html',
styleUrls: ['app-test1.component.scss']
})
export class TestParentComponent {

@Input() testBoolean;

constructor() { }

onClick() {
console.log(this.testBoolean);
}
}


When I run the application getting below error:

Can't bind to 'testBoolean' since it isn't a known property of 'app-test'.

1. If 'app-test' is an Angular component and it has 'testBoolean' input, then verify that it is part of this module.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

Continue reading...