Just recently delving into Angular, I embarked on this journey last week with a small programming foundation. My current project involves creating a simple blog application where I need to pass a value from the root (app.component.ts) to my component tag "app-post-list-item" nested within another component template (post-list-component.html). Unfortunately, despite my attempts at using @Input() in different places, the text doesn't display. There seems to be a missing piece or misunderstanding on my end, and it's all quite overwhelming. I even tried relocating the "post-list-item" folder inside the "post-list" one, but that too proved futile.
Both "post-list" and "post-list-item" serve as child components of "app". Could someone please review my code and provide guidance on how to successfully achieve this? Any insights would be greatly appreciated. Thank you!
Here is the architecture diagram for reference.
Snippet from app.component.html:
<div class="row">
<div class="col-12">
<app-post-list></app-post-list>
</div>
</div>
Extract from app.component.ts:
export class AppComponent {
title = 'blogApp';
pub1: string = "My first post"; // Desired content to display
}
Snippet from post-list.component.html:
<ul class="list-group">
<app-post-list-item [titrePubli]="pub1"></app-post-list-item> <!-- Indicating content to display -->
<app-post-list-item></app-post-list-item>
<app-post-list-item></app-post-list-item>
</ul>
Extract from 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; // Utilizing @Input() here
constructor() { }
ngOnInit(): void { }
}
Snippet from post-list-item.component.html:
<li class="list-group-item">
<h3 style="font-size: 20px;">Title: {{ getTitrePubli() }}</h3> <!-- Desired location for display -->
<h4 style="font-size: 18px;">Content: {{ getContenuPubli() }}</h4>
</li>
Extract from 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 = "This is some dummy text";
@Input() pub1: string;
constructor() { }
ngOnInit(): void { }
getTitrePubli() { return this.titrePubli; }
getContenuPubli() { return this.contenuPubli; }
}