Forum Discussion Component - Copy this Angular, Css Component to your project
usa este código: "import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ForumPostComponent } from './forum-post.component'; import { ForumReplyComponent } from './forum-reply.component'; @NgModule({ declarations: [ForumPostComponent, ForumReplyComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [ForumPostComponent, ForumReplyComponent] }) export class ForumModule { }", "import { Component, Input, OnInit } from '@angular/core'; interface Post { _id: string; type: string; title: string; content: string; author: { id: string; username: string; profilePictureUrl: string; }; category: string; creationDate: string; location: { department: string; district: string; }; media: { id: string, type: string, url: string }[]; responses: Reply[]; favorite: boolean; reported: boolean; } interface Reply { id: string; author: { id: string; username: string; profilePictureUrl: string; }; content: string; creationDate: string; responses: Reply[]; } @Component({ selector: 'app-forum-post', templateUrl: './forum-post.component.html', styleUrls: ['./forum-post.component.css'] }) export class ForumPostComponent implements OnInit { @Input() post: Post; constructor() { } ngOnInit(): void { } }", "<div class="forum-post"> <div class="post-header"> <img class="profile-picture" src="{{ post.author.profilePictureUrl }}" alt="{{ post.author.username }}"> <div class="post-info"> <span class="username">{{ post.author.username }}</span> <span class="date">{{ post.creationDate }}</span> </div> </div> <div class="post-content"> <h2>{{ post.title }}</h2> <p>{{ post.content }}</p> </div> <div class="post-replies"> <app-forum-reply *ngFor="let reply of post.responses" [reply]="reply"></app-forum-reply> </div> </div>", "import { Component, Input, OnInit } from '@angular/core'; interface Reply { id: string; author: { id: string; username: string; profilePictureUrl: string; }; content: string; creationDate: string; responses: Reply[]; } @Component({ selector: 'app-forum-reply', templateUrl: './forum-reply.component.html', styleUrls: ['./forum-reply.component.css'] }) export class ForumReplyComponent implements OnInit { @Input() reply: Reply; constructor() { } ngOnInit(): void { } }", "<div class="forum-reply"> <div class="reply-header"> <img class="profile-picture" src="{{ reply.author.profilePictureUrl }}" alt="{{ reply.author.username }}"> <div class="reply-info"> <span class="username">{{ reply.author.username }}</span> <span class="date">{{ reply.creationDate }}</span> </div> </div> <div class="reply-content"> <p>{{ reply.content }}</p> </div> <div class="reply-replies" *ngIf="reply.responses.length > 0"> <app-forum-reply *ngFor="let nestedReply of reply.responses" [reply]="nestedReply"></app-forum-reply>"
