>*' Selector Not Working from Parent to Child Component

Unable to use child component in a parent component in Angular2

You had typo inside child-component meta options.

templateUrl: `<p>Child Component</p>`

should be

template: `<p>Child Component</p>`

Can't access child from parent component in angular

export class Editor implements OnInit, OnDestroy {

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {

}

In the above code the implementation for the AfterViewInit life cycle hook is missing.In angular documentation it states that this life cycle hook is important.

Angular documentation for component intreactions

Try changing the above code as following

import {
  Component,
  OnInit,
  ViewChild,
  OnDestroy,
  AfterViewInit
} from "@angular/core";

export class Editor implements OnInit, OnDestroy,AfterViewInit {

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {

}

Angular communication between parent and child using @Input components doesn't work but gives no errors

Actually you need to call Parent Component to parse your @input to the Child Component. you are directly calling the child selector that is why your not able to displaying anything.

So, call the Parent Component in app.component.html to get input string,

<app-parent></app-parent>

Styling not applying to child component

It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

Angular component communication parent - child not working

Try this:

<app-portalcard *ngFor="let portalcard of portalcards" [portalcard]="portalcard">          
</app-portalcard>

Instead of your code:

<app-portalcard *ngFor="let portalcard of portalcards">      
    [portalcard]="portalcard"
</app-portalcard>

---

Related Topics