Component does not render in Angular

Question

I’m starting my studies at Angular and I’m having a hard time.

I have my.Component app already created and working properly.

I created a new component ng generate Component list-person and am creating an input.

Within the list-person.component.ts file I create a variable name.

nome:   string  =   "Roseweltty";

Within the list-person.html file I create the input.

<input  type="text" [(ngModel)]="nome">

// the name variable will display real-time changes made to the input.

<p>{{nome}}</p

When I open the browser it does not display the information of the list-person Component only of the app.Component, so that if I put these commands in the app’s Cs and html.Component they display on the screen and display correctly.

My question is: is there any configuration in Angular, Vscode etc, that I have to do to display the components in the application correctly? There needs to be some kind of call to those functions. or something like that. since it is not generating any error, neither in the browser console nor in the code.

Please I need a help, I know it must be just a slip of mine, but I’ve researched the net long before the group help.

Answer 1

When you create a component with Angular you can automatically use it where you need it, to render the new component in another it is necessary to declare it in the component by your selector:

Your Person List Component

---------------- TS ----------------

imports {...} from '...'

@Component({
  selector: 'lista-pessoa',             <= seletor Html do componente
  ...
})

export class ListaPessoa implements OnInit {
  nome: string = "Roseweltty";      

  constructor() {}
  ngOnInit() {}
}

----------------- HTML ----------------

<div>
   <input type="text" [(ngModel)]="nome">
</div>

Its Component Appcomponent

----------------- HTML ----------------

<div>
   <h1>Digite o seu nome:</h1>
   <lista-pessoa></lista-pessoa>        <= Utilizado aqui
</div>