El contenido ng se usa cuando queremos insertar el contenido dinámicamente dentro del componente que ayuda a aumentar la reutilización del componente. Usando ng-content podemos pasar contenido dentro del selector de componentes y cuando angular analiza ese contenido que aparece en el lugar de ng-content.
Sintaxis:
<ng-contenido select=”.app”></ng-contenido>
Acercarse:
- Cree una aplicación angular para usar.
- Cree un componente «geek» usando el comando «ng gc geek».
- Luego usamos este componente dentro del componente de la aplicación y proporcionamos el contenido ng dentro del componente «geek».
- Usando ng-content, estamos pasando dos cosas en el componente geek, primero es la posición de la persona y segundo es el año de experiencia.
Ejemplo:
app.component.html
<app-geek> <strong class="app">Senior Developer</strong> <strong class="app1">Experience : 5 years</strong> </app-geek> <hr> <app-geek> <strong class="app">Application Developer</strong> <strong class="app1">Experience : 2 years</strong> </app-geek>
geek.component.html
<h3> <span>Hello, I am </span> <ng-content select=".app"></ng-content> </h3> <h4> <ng-content select=".app1"></ng-content> </h4>
Cuando necesitamos pasar varias cosas dentro del selector de componentes, debemos proporcionarles un selector único, ya sea cualquier ID o clase, de modo que al usar ese selector único podamos acceder a contenido particular dentro del contenido ng. Así que aquí «seleccionar» dentro de ng-content se usa para tomar contenido con el nombre de clase correspondiente app o app1.
Salida: Ejecute esto usando el comando «ng serve» y luego vaya al navegador y abra «localhost: 4200».
