Blog Details Component - Copy this Angular, Css Component to your project

@if(!isLoading()){<div class="blogs__details"> <section class="blogs__details__container"> @if(!isLoading()){ <div class="blogs__details__content"> <article class="blog__header"> <h1 class="blog__title"> {{blogsInnerData()?.blogTitle}} </h1> <p class="blog__author"> {{blogsInnerData()?.category}} <span> | {{blogsInnerData()?.blogPublishingDate}} </span> </p> <figure class="blog__banner image"> <img [src]="blogsInnerData()?.blogFeatureImage?.url" [alt]="blogsInnerData()?.blogFeatureImage?.alternativeText" /> </figure> </article> <div class="blog__detail__wrapper" [innerHTML]="blogsInnerData()?.content"></div> </div> } <aside class="blogs__details__sidebar"> <! @if(isLoading){ <div class="widget"> <header class="widget__header"> <h1>Table of content</h1> </header> <div class="widget__body"> <div class="list component list loader"></div> </div> </div> }@else{ > <article class="tableof__content"> <h5>Table of Contents</h5> <ul class="options__list"> @for(item of tocItems(); track item){ <li class="toc_item"> {{item.text}} </li> } </ul> </article> <article class="news__letter"> <h4>Weekly Newsletter</h4> @if(!showSubmissionText){ <form class="news__letter__form" [formGroup]="newsLetterFormWeb"> <div class="form__row"> <input type="text" id="firstName" name="firstName" placeholder=" Enter First Name" class="row input" formControlName="firstName" [maxLength]="40" noMultipleSpaces [class.invalid]="firstName?.invalid