child components selector messing up parent div row-CodePudding

Just learning Angular and want to do this:

<div >

<app-kid name="kid one"></app-kid>
<app-kid name="kid two"></app-kid>
</div>

It was supposed to display horizontally but because the DOM includes <div><app-kid>..., it displays vertically one after one.

app-kid.component.html

<div >
    content
</div>

app-kid.component.ts

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

@Component({
  selector: 'app-kid',
  templateUrl: './kid.component.html',
  styleUrls: ['./kid.component.css']
})
export class KidComponent implements OnInit {
  @Input() name = "";

  constructor() { }

  ngOnInit(): void {
  }
}

how do I avoid app-kid from being inserted into the DOM tree.

I tried pasting kid compnoent code into my parent component and it worked but i want to separate.

CodePudding user response：

Instead of putting the col class in your first div, put it in your .ts file like this:

@Component({
   selector: 'app-kid',
   templateUrl: './kid.component.html',
   styleUrls: ['./kid.component.css'],
   host: {'class': 'someClass1'}
})

This way, the attribute class will be applied to <app-kid> - which is a host of the app-kid component