add dynamic title in article card

ajitsinghkaler · Jul 22, 2021 · fa6062c · fa6062c
1 parent 6fbc74f
commit fa6062c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/src/app/pages/home/articles/article-card/article-card.component.html b/src/app/pages/home/articles/article-card/article-card.component.html
@@ -12,7 +12,12 @@
     </div>
     <div class="article-body">
         <!-- Todo check spacing is 36px but should be 30px -->
-        <h3 class="article-title m-0">{{article.title}}</h3>
+        <span #ref>
+            <ng-content></ng-content>
+        </span>
+        <ng-container *ngIf="!ref.hasChildNodes()">
+            <h3 class="article-title m-0">{{article.title}}</h3>
+        </ng-container>
         <div class="flex article-tags">
             <a class="article-tag" *ngFor="let tag of article.tag_list">
                 #{{tag}}

diff --git a/src/app/pages/home/articles/article-card/article-card.component.ts b/src/app/pages/home/articles/article-card/article-card.component.ts
@@ -9,6 +9,7 @@ import { Article } from 'src/app/models/articles';
 export class ArticleCardComponent implements OnInit {
   @Input() article!: Article;
   constructor() {}
+
 
   ngOnInit(): void {
   }

diff --git a/src/app/pages/home/articles/featured-article/featured-article.component.html b/src/app/pages/home/articles/featured-article/featured-article.component.html
@@ -1,3 +1,5 @@
 <a class="featured-img" style.background-image="url({{featured?.cover_image}})"></a>
 <!-- Todo make featured title big -->
-<app-article-card *ngIf="featured" [article]="featured"></app-article-card>
+<app-article-card *ngIf="featured" [article]="featured">
+    <h3 class="featured-title">{{featured?.title}}</h3>
+</app-article-card>
diff --git a/src/app/pages/home/articles/featured-article/featured-article.component.scss b/src/app/pages/home/articles/featured-article/featured-article.component.scss
@@ -29,3 +29,7 @@ app-article-card {
   background-size: cover;
   background-position: center center;
 }
+
+.featured-title{
+    font-size: 1.875rem;
+}