How to ceate a common child component in Angular

Question

I am new to angular.I going to develop common drop down bar to all the ui components.Therefore i am going to create a common child reusable component with other parent components.How can i create a common child component.?

This is my parent components folder structure.

You may check which is having common behaviour https://stackoverflow.com/questions/43580675/how-to-display-common-header-and-footer-by-default-in-angular-2 — MBB, Aug 18 '20 at 05:47
You can create a component module in a folder named **shared** & import it in the module, where you want to use it. — Yogendra Chauhan, Aug 18 '20 at 05:50
You just make one shared folder in that make dropdown component which has input and output so you can pass the values to that control and get the selected value from output. By using the shared component selector you can use it any where. — ShivShankar Namdev, Aug 18 '20 at 05:53
@YogendraChauhan import it in the module mean i want to import it to parent and app.module .ts files as well — Mands, Aug 18 '20 at 06:03
@Mandara In case you have multiple feature modules in your application then you need to import the Dropdown component module in each module to make it work. If you have only one module the you can import it on you parent app.module.ts file. — Yogendra Chauhan, Aug 18 '20 at 06:06

Medhat Mahmoud · Answer 1 · 2020-08-18T06:03:50.930

A parent component cannot use data binding to read child properties or invoke child methods. You can do both by creating a template reference variable for the child element and then reference that variable within the parent template as seen in the following example.

The following is a child CountdownTimerComponent that repeatedly counts down to zero and launches a rocket. It has start and stop methods that control the clock and it displays a countdown status message in its own template.

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

@Component({
  selector: 'app-countdown-timer',
  template: '<p>{{message}}</p>'
})
export class CountdownTimerComponent  implements OnInit, OnDestroy {

  intervalId = 0;
  message = '';
  seconds = 11;

  clearTimer() { clearInterval(this.intervalId); }

  ngOnInit()    { this.start(); }
  ngOnDestroy() { this.clearTimer(); }

  start() { this.countDown(); }
  stop()  {
    this.clearTimer();
    this.message = `Holding at T-${this.seconds} seconds`;
  }

  private countDown() {
    this.clearTimer();
    this.intervalId = window.setInterval(() => {
      this.seconds -= 1;
      if (this.seconds === 0) {
        this.message = 'Blast off!';
      } else {
        if (this.seconds < 0) { this.seconds = 10; } // reset
        this.message = `T-${this.seconds} seconds and counting`;
      }
    }, 1000);
  }
}

The CountdownLocalVarParentComponent that hosts the timer component is as follows:

import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
  selector: 'app-countdown-parent-lv',
  template: `
  <h3>Countdown to Liftoff (via local variable)</h3>
  <button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
  <app-countdown-timer #timer></app-countdown-timer>
  `,
  styleUrls: ['../assets/demo.css']
})
export class CountdownLocalVarParentComponent { }

The parent component cannot data bind to the child's start and stop methods nor to its seconds property.

You can place a local variable, #timer, on the tag representing the child component. That gives you a reference to the child component and the ability to access any of its properties or methods from within the parent template.

I hope this example helps you

How to ceate a common child component in Angular

1 Answers1