I am completely new to Angular, have started it last week (but I have a small basic background in programming). I am trying to build a very basic blog application, and I want to get a value from the root (app.component.ts) to my component tag(s) "app-post-list-item", located in my other component template (post-list-component.html), so that I can display it in my post list item. I have tried @Input() in various places, but the text just doesn't show up. There might be something I am missing or misunderstanding, but this is just all so intimidating and I don't know what or how to do now. I have tried to move the "post-list-item" folder inside the "post-list" one, but it doesn't work either. So, note that both "post-list" and "post-list-item" are children components of "app".
Can anyone check my code and tell me how I could make that work, please? That would be awesome. Thank you!!
app.component.html:
<div class="row">
<div class="col-12">
<app-post-list></app-post-list>
</div>
</div>
app.component.ts:
export class AppComponent {
title = 'blogApp';
pub1: string = "Ma première publi"; // this is what I want to display
}
post-list.component.html:
<ul class="list-group">
<app-post-list-item [titrePubli]="pub1"></app-post-list-item> <!-- this is where I tell that I want to display -->
<app-post-list-item></app-post-list-item>
<app-post-list-item></app-post-list-item>
</ul>
post-list.component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
@Input() pub1: string; // note the @Input() here
constructor() { }
ngOnInit(): void { }
}
post-list-item.component.html:
<li class="list-group-item">
<h3 style="font-size: 20px;">Titre : {{ getTitrePubli() }}</h3> <!-- this is where I want to display -->
<h4 style="font-size: 18px;">Contenu : {{ getContenuPubli() }}</h4>
</li>
post-list-item.component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-post-list-item',
templateUrl: './post-list-item.component.html',
styleUrls: ['./post-list-item.component.scss']
})
export class PostListItemComponent implements OnInit {
@Input() titrePubli: string;
contenuPubli: string = "C'est le bla bla bla";
@Input() pub1: string;
constructor() { }
ngOnInit(): void { }
getTitrePubli() { return this.titrePubli; }
getContenuPubli() { return this.contenuPubli; }
}