No access to child component

Question

I have 2 components. The first app-aaa hasapp-bbb inside.

aaa-component.html:

        <button (click)="clickMe(flight)" type="submit">click me</button>           
        <app-bbb [flight]="flight"></app-bbb>

aaa-component.ts:

        export class AaaComponent implements OnInit {

            @ViewChild(BbbComponent) change: BbbComponent;

            constructor(){}

            ngOnInit() {
                flight: ModelFlights = {
                    name:''
                    value:''
                }
            }             

            clickMe(form) {           
                this.change.change();
            }
        }

bbb-component.ts:

     export class BbbComponent implements OnInit {
          @Input() flight: ModelFlights; 
          constructor(private cdRef: ChangeDetectorRef, private  sanitizer: DomSanitizer, private renderer2: Renderer2,
                      @Inject(DOCUMENT) private _document) {}
          ngOnInit(){}
          change() {
            console.log('change event ');
            // ...    
          }
        }

I want to make access to the method from the bbb-component component by clicking the clickMe button

currently receiving error message:

ERROR TypeError: Cannot read property change of undefined at AaaComponent.push../src/app/core/aaa/aaa.component.ts.AaaComponent.clickMe

line: this.change.change();

I have such libraries:

    {
        "name": "weco-travel-app",
        "version": "0.0.0",
        "scripts": {
            "ng": "ng",
            "start": "ng serve",
            "build": "ng build",
            "test": "ng test",
            "lint": "ng lint",
            "e2e": "ng e2e",
            "scss": "node-sass --watch assets/scss -o assets/css"
        },
        "private": true,
        "dependencies": {
            "@angular/animations": "^7.2.15",
            "@angular/cdk": "^7.3.7",
            "@angular/common": "~7.2.0",
            "@angular/compiler": "~7.2.0",
            "@angular/core": "~7.2.0",
            "@angular/forms": "~7.2.0",
            "@angular/material": "^7.3.7",
            "@angular/material-moment-adapter": "^8.0.2",
            "@angular/platform-browser": "~7.2.0",
            "@angular/platform-browser-dynamic": "~7.2.0",
            "@angular/router": "~7.2.0",
            "@angular/service-worker": "^8.0.0",
            "animate": "^1.0.0",
            "bootstrap": "^4.3.1",
            "core-js": "^2.5.4",
            "font-awesome": "^4.7.0",
            "hammerjs": "^2.0.8",
            "jquery": "^3.4.1",
            "moment": "^2.24.0",
            "ng-connection-service": "^1.0.4",
            "ng-recaptcha": "^4.3.0",
            "ngx-owl-carousel": "2.0.5",
            "node-sass": "^4.12.0",
            "popper.js": "^1.15.0",
            "resize-observer-polyfill": "^1.5.1",
            "rxjs": "~6.3.3",
            "tslib": "^1.9.0",
            "zone.js": "~0.8.26"
        },
        "devDependencies": {
            "@angular-devkit/build-angular": "~0.13.0",
            "@angular/cli": "~7.3.9",
            "@angular/compiler-cli": "~7.2.0",
            "@angular/language-service": "~7.2.0",
            "@types/jasmine": "~2.8.8",
            "@types/jasminewd2": "~2.0.3",
            "@types/node": "~8.9.4",
            "codelyzer": "~4.5.0",
            "jasmine-core": "~2.99.1",
            "jasmine-spec-reporter": "~4.2.1",
            "karma": "~4.0.0",
            "karma-chrome-launcher": "~2.2.0",
            "karma-coverage-istanbul-reporter": "~2.0.1",
            "karma-jasmine": "~1.1.2",
            "karma-jasmine-html-reporter": "^0.2.2",
            "protractor": "~5.4.0",
            "ts-node": "~7.0.0",
            "tslint": "~5.11.0",
            "typescript": "~3.2.2",
            "webpack": "^4.32.1",
            "webpack-dev-server": "^3.4.1"
        },
        "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.9.",
        "main": "index.js",
        "author": "",
        "license": "ISC"
    }

Please help

The problem is that it cannot identify the this.change (it is undefined at the moment of calling). Can you make sure that your ViewChild is configured properly by checking the component name? — Kavinda Jayakody, Aug 29 '19 at 08:58
Also, look at this answer for the string selector [link](https://stackoverflow.com/a/38974968/6686446) — Kavinda Jayakody, Aug 29 '19 at 08:59
the `bbb-component` has such a constructor `constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer, private renderer2: Renderer2, @Inject(DOCUMENT) private _document) {}` I don't know how to create such an object : `notifyObj = new BbbComponent();` — 609tom, Aug 29 '19 at 09:34

score 0 · Answer 1 · answered Aug 29 '19 at 11:18

0

You need change your html to:

...
        <app-bbb #test [flight]="flight"></app-bbb>
...

And your component to:

...
            @ViewChild("test", {static: false}) change: BbbComponent;
...

I build a sample for you:

https://stackblitz.com/edit/angular-zdmaft?file=src%2Fapp%2Fapp.component.ts

answered Aug 29 '19 at 11:18

Miguel Pinto

523
2
8

but my component looks like this: `export class ResultOfFlightsComponent implements OnInit { @Input() flight: ModelFlights; constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer, private renderer2: Renderer2, @Inject(DOCUMENT) private _document) { } ngOnInit() {} change() { console.log('change event '); // ... } }` I still have a error: `Cannot read property 'changeUrl' of undefined at SafeSubscriber._next` – 609tom Aug 29 '19 at 13:35
I update the sample: app.component2 is now your ResultOfFlightsComponent. And it's ok. where's the property 'changeUrl'? i need more code to help you – Miguel Pinto Aug 29 '19 at 13:47
`export class BbbComponent implements OnInit { @Input() flight: ModelFlights; constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer, private renderer2: Renderer2, @Inject(DOCUMENT) private _document) { } ngOnInit() {} change() { console.log('change event '); // ... } }` Error: `Cannot read property change of undefined at SafeSubscriber._next – 609tom Aug 29 '19 at 14:22
is the same code as the previous message, just the component name is different – Miguel Pinto Aug 29 '19 at 14:31
this is the current code: `export class BbbComponent implements OnInit { @Input() flight: ModelFlights; constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer, private renderer2: Renderer2, @Inject(DOCUMENT) private _document) {} ngOnInit(){} change() { console.log('change event '); // ... } }` receives an error message: `Cannot read property 'change' of undefined at SafeSubscriber._next – 609tom Aug 29 '19 at 15:02
I have such libraries. I wrote them in a post – 609tom Aug 29 '19 at 19:01

No access to child component

1 Answers1