Display child component in a parent component

pretty much same as john peters i will give you another example how i solved it in one of my applications.

goal: display child component inside parent page

to do:
inside app create folder 'parent',
inside 'parent' create folder 'components',
inside 'parent' create component 'parent-page.component',
inside 'components' create component 'child.component',
inside 'parent' create file 'parent.module.ts',

import components into this module and export the parent page.

after creating this folder and component structure lets look at the code:

// parent.module.ts
@NgModule({
  declarations: [
      ParentPageComponent,
      ChildComponent
  ],
  imports: [
     // import modules if you need here like UtilsModule, MaterialModule etc..
  ],
  exports: [
    parentPageComponent
  ]
})
export class ParentModule{}

now we add some html, css and ts files for our child component for example a button

// child.component.html
<div class="row center">
  <div class="col-12">
    <button class="button"> you are DOPE </button>
  </div>
</div>

// child.component.scss
.button {
    background: #ff0;
    color: #000;
    padding: 15px;
}
.center {
    text-align: center;
}

// child.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {}
}

next we work on the parent-page.component by modifying the html, css and ts files

// parent-page.component.html
<div class="parent">
  <child></child>
</div>

// parent-page.component.scss
.parent {
  margin: 0 auto;
  max-width: 1200px;
  background: #111;
}

// parent-page.compoent.ts
import { Component, OnInit } from '@angular/core';

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

  constructor() {}

  ngOnInit() { }
}

you can modify parent and child content as you need. i hope these code snippets can help you solve your problem!

One solution is: Just type in ng g c mychildcomponent, then paste in this code

   <div class="row">
        <div class="col-lg-12 align-evenly">
            <button class="btn btn-primary btn-rounded right-margin">Monthly</button>
            <button class="btn btn-primary btn-rounded right-margin">Quaterly</button>
        </div>
    </div>

Now in parent component do this in the main html

<app-mychild-component></app-mychild-component>