Angular Bootstrap Blog Component
Angular Blog Component - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Angular Bootstrap blog components is a set of components which are dedicated to building a blog or any other content-oriented website.
Required styles import
Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global
styles.scssstylesheet file.
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";
@import "~ng-uikit-pro-standard/assets/scss/addons-pro/_blog-pro.scss";
Author Box v.1
About the author
.webp)
Danny Newman
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et magnam.
<!--Section: Author Box-->
<section class="my-5">
<!-- Card header -->
<div class="card-header border-0 font-weight-bold d-flex justify-content-between">
<p class="mr-4 mb-0">About the author</p>
<ul class="list-unstyled list-inline mb-0">
<li class="list-inline-item"><a class="blue-text mr-3"><mdb-icon fas icon="envelope" class="mr-1"></mdb-icon>Send message</a></li>
<li class="list-inline-item"><a class="blue-text mr-3"><mdb-icon fas icon="user" class="mr-1"></mdb-icon>See profile</a></li>
<li class="list-inline-item"><a class="blue-text mr-3"><mdb-icon fas icon="rss" class="mr-1"></mdb-icon>Follow</a></li>
</ul>
</div>
<div class="media mt-4 px-1">
<img class="card-img-100 d-flex z-depth-1 mr-3" src="http://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">
<a href="">Danny Newman</a>
</h5>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et
magnam.
</div>
</div>
</section>
<!--Section: Author Box-->
Author Box v.2
About the author
Danny Newman
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et magnam.
<!--Section: Author Box-->
<section class="my-5">
<!-- Card header -->
<div class="card-header border-0 font-weight-bold d-flex justify-content-between">
<p class="mr-4 mb-0">About the author</p>
<ul class="list-unstyled list-inline mb-0">
<li class="list-inline-item"><a class="text-default mr-3"><mdb-icon fas icon="envelope" class="mr-1"></mdb-icon>Send
message</a></li>
<li class="list-inline-item"><a class="text-default mr-3"><mdb-icon fas icon="user" class="mr-1"></mdb-icon>See
profile</a></li>
<li class="list-inline-item"><a class="text-default mr-3"><mdb-icon fas icon="rss" class="mr-1"></mdb-icon>Follow</a></li>
</ul>
</div>
<div class="media mt-4 px-1">
<img class="card-img-100 rounded-circle d-flex z-depth-1 mr-3" src="http://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">
<a class="text-default" href="">Danny Newman</a>
</h5>
<ul class="list-unstyled list-inline mb-2 pt-1">
<li class="list-inline-item">
<a class="grey-text mr-1"><mdb-icon fab icon="facebook-f" size="lg"> </mdb-icon></a>
</li>
<li class="list-inline-item">
<a class="grey-text mr-1"><mdb-icon fab icon="twitter" size="lg"> </mdb-icon></a>
</li>
<li class="list-inline-item">
<a class="grey-text mr-1"><mdb-icon fab icon="google-plus" size="lg"> </mdb-icon></a>
</li>
<li class="list-inline-item">
<a class="grey-text mr-1"><mdb-icon fab icon="linkedin-in" size="lg"> </mdb-icon></a>
</li>
<li class="list-inline-item">
<a class="grey-text mr-1"><mdb-icon fab icon="instagram" size="lg"> </mdb-icon></a>
</li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum et
magnam.
</div>
</div>
</section>
<!--Section: Author Box-->
Comments List v.2 MDB Pro component
4 comments
.webp)
Miley Steward
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..webp)
Tommy Smith
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo..webp)
Sylvester the Cat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem..webp)
Caroline Horwitz
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa officia deserunt mollitia animi, id est laborum et dolorum fuga.
<!--Section: Comments-->
<section class="my-5">
<!-- Card header -->
<div class="card-header border-0 font-weight-bold">4 comments</div>
<div class="media d-block d-md-flex mt-4">
<img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="font-weight-bold mt-0">
<a class="text-default" href="">Miley Steward</a>
<a href="" class="pull-right text-default">
<mdb-icon fas icon="reply"></mdb-icon>
</a>
</h5>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="media d-block d-md-flex mt-4">
<img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (27).webp"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="font-weight-bold mt-0">
<a class="text-default" href="">Tommy Smith</a>
<a href="" class="pull-right text-default">
<mdb-icon fas icon="reply"></mdb-icon>
</a>
</h5>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
<!-- Quick Reply -->
<div class="md-form mt-4">
<label for="quickReplyFormComment">Your comment</label>
<textarea class="form-control md-textarea" id="quickReplyFormComment" rows="3" mdbInput></textarea>
<div class="text-center my-4">
<button mdbBtn color="default" size="sm" rounded="true" mdbWavesEffect type="submit">Post</button>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="font-weight-bold mt-0">
<a class="text-default" href="">Sylvester the Cat</a>
<a href="" class="pull-right text-default">
<mdb-icon fas icon="reply"></mdb-icon>
</a>
</h5>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>
</div>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="card-img-64 rounded-circle z-depth-1 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).webp"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="font-weight-bold mt-0">
<a class="text-default" href="">Caroline Horwitz</a>
<a href="" class="pull-right text-default">
<mdb-icon fas icon="reply"></mdb-icon>
</a>
</h5>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
officia deserunt mollitia animi, id est laborum et dolorum fuga.
</div>
</div>
<!--Pagination -->
<nav class="d-flex justify-content-center mt-5">
<ul class="pagination pagination-circle pg-teal mb-0">
<!--First-->
<li class="page-item disabled">
<a class="page-link">First</a>
</li>
<!--Arrow left-->
<li class="page-item disabled">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active">
<a class="page-link" mdbWavesEffect>1</a>
</li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>2</a>
</li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>3</a>
</li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>4</a>
</li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>5</a>
</li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<!--Last-->
<li class="page-item">
<a class="page-link" mdbWavesEffect>Last</a>
</li>
</ul>
</nav>
<!--Pagination -->
</section>
Reply Form v.1
Leave a reply
<!-- Reply section -->
<section class="my-5">
<!-- Leave a reply -->
<div class="card-header border-0 font-weight-bold">Leave a reply</div>
<!-- Default form reply -->
<form class="px-1 mt-4">
<!-- Comment -->
<div class="form-group">
<label for="replyFormComment">Your comment</label>
<textarea class="form-control" id="replyFormComment" rows="5"></textarea>
</div>
<!-- Name -->
<label for="replyFormName">Your name</label>
<input type="email" id="replyFormName" class="form-control">
<br>
<!-- Email -->
<label for="replyFormEmail">Your e-mail</label>
<input type="email" id="replyFormEmail" class="form-control">
<div class="text-center mt-4">
<button mdbBtn color="primary" mdbWavesEffect type="submit">Post</button>
</div>
</form>
<!-- Default form reply -->
</section>
<!-- Reply section -->
Reply Form v.2 MDB Pro component
Leave a reply
<!-- Reply section -->
<section class="my-5">
<!-- Leave a reply -->
<div class="card-header border-0 font-weight-bold">Leave a reply</div>
<!-- Default form reply -->
<form class="px-1 mt-4">
<!-- Comment -->
<div class="md-form">
<label for="replyFormComment">Your comment</label>
<textarea class="form-control md-textarea" id="replyFormComment" rows="4" mdbInput></textarea>
</div>
<!-- Name -->
<div class="md-form mt-5">
<label for="replyFormName">Your name</label>
<input type="email" id="replyFormName" class="form-control" mdbInput>
</div>
<!-- Email -->
<div class="md-form mt-5">
<label for="replyFormEmail">Your e-mail</label>
<input type="email" id="replyFormEmail" class="form-control" mdbInput>
</div>
<div class="text-center mt-4">
<button mdbBtn color="default" rounded="true" mdbWavesEffect type="submit">Post</button>
</div>
</form>
<!-- Default form reply -->
</section>
<!-- Reply section -->
Reply Form v.3
Leave a reply
<!-- Reply section -->
<section class="my-5">
<!-- Leave a reply -->
<div class="card-header border-0 font-weight-bold">Leave a reply</div>
<!-- Reply form -->
<form class="mt-4">
<div class="d-md-flex flex-md-fill">
<div class="input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text white grey-text" id="basic-addon9">1</span>
</div>
<input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Username"
aria-describedby="basic-addon9">
</div>
<div class="input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text white grey-text" id="basic-addon10">2</span>
</div>
<input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Email"
aria-describedby="basic-addon10">
</div>
<div class="input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text white grey-text" id="basic-addon101">3</span>
</div>
<input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Website"
aria-describedby="basic-1">
</div>
</div>
<div class="form-group px-2">
<textarea class="form-control pl-3 pt-3" id="exampleFormControlTextarea1" rows="6" placeholder="Write something here..."></textarea>
</div>
<div class="text-center mt-4">
<button mdbBtn color="primary" mdbWavesEffect>Submit</button>
</div>
</form>
<!-- Reply form -->
</section>
<!-- Reply section -->
Reply Form v.4 MDB Pro component
Leave a reply
<!-- Reply section -->
<section class="my-5">
<!-- Leave a reply -->
<div class="card-header border-0 font-weight-bold">Leave a reply</div>
<!-- Reply form -->
<form>
<div class="d-md-flex flex-md-fill">
<div class="md-form input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text md-addon pr-4" id="basic-addon9"><mdb-icon fas icon="user"></mdb-icon></span>
</div>
<input type="text" class="form-control mt-0 pl-0" placeholder="Username" aria-describedby="basic-addon9">
</div>
<div class="md-form input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text md-addon pr-4" id="basic-addon10"><mdb-icon fas icon="at"></mdb-icon></span>
</div>
<input type="text" class="form-control mt-0 pl-0" placeholder="Email" aria-describedby="basic-addon10">
</div>
<div class="md-form input-group input-group-md px-2 mb-4">
<div class="input-group-prepend">
<span class="input-group-text md-addon pr-4" id="basic-addon101"><mdb-icon fas icon="code"></mdb-icon></span>
</div>
<input type="text" class="form-control mt-0 pl-0" placeholder="Website" aria-describedby="basic-1">
</div>
</div>
<div class="md-form input-group mt-0 px-2">
<div class="input-group-prepend">
<span class="input-group-text align-items-start md-addon pr-4"><mdb-icon fas icon="pencil-alt"></mdb-icon></span>
</div>
<textarea class="form-control md-textarea pl-0" rows="5" placeholder="Write something here"
aria-describedby="with-textarea"></textarea>
</div>
<div class="text-center mt-4">
<button mdbBtn color="default" rounded="true" mdbWavesEffect>Submit</button>
</div>
</form>
<!-- Reply form -->
</section>
<!-- Reply section -->
Reply Form (logged in user) v.1
Leave a reply (logged in user)
.webp)
<!-- Reply section (logged in user) -->
<section class="my-5">
<div class="card-header border-0 font-weight-bold">Leave a reply (logged in user)</div>
<div class="d-md-flex flex-md-fill mt-4 px-1">
<div class="d-flex justify-content-center mr-md-5">
<img class="card-img-100 z-depth-1 mb-4" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).webp"
alt="avatar">
</div>
<textarea class="form-control pl-3 pt-3" id="exampleFormControlTextarea1" rows="6" placeholder="Write something here..."></textarea>
</div>
<div class="text-center mt-4">
<button mdbBtn color="primary" mdbWavesEffect>Submit</button>
</div>
</section>
<!-- Reply section (logged in user) -->
Reply Form (logged in user) v.2 MDB Pro component
Leave a reply (logged in user)
<!-- Reply section (logged in user) -->
<section class="my-5">
<div class="card-header border-0 font-weight-bold">Leave a reply (logged in user)</div>
<div class="d-md-flex flex-md-fill px-1">
<div class="d-flex justify-content-center mr-md-5 mt-md-5 mt-4">
<img class="card-img-100 z-depth-1 rounded-circle" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).webp"
alt="avatar">
</div>
<div class="md-form w-100">
<textarea class="form-control md-textarea pt-0" id="exampleFormControlTextarea1" rows="5" placeholder="Write something here..."></textarea>
</div>
</div>
<div class="text-center">
<button mdbBtn color="default" rounded="true" mdbWavesEffect>Submit</button>
</div>
</section>
<!-- Reply section (logged in user) -->
Angular Blog Components - API
In this section you will find information about required modules and available inputs, outputs, methods and events of Angular Blog Components sections.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md';
Comments List v.1
Miley Steward
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tommy Smith
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Sylvester the Cat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Caroline Horwitz
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa officia deserunt mollitia animi, id est laborum et dolorum fuga.<!--Section: Comments--> <section class="my-5"> <!-- Card header --> <div class="card-header border-0 font-weight-bold">4 comments</div> <div class="media d-block d-md-flex mt-4"> <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp" alt="Generic placeholder image"> <div class="media-body text-center text-md-left ml-md-3 ml-0"> <h5 class="font-weight-bold mt-0"> <a href="">Miley Steward</a> <a href="" class="pull-right"> <mdb-icon fas icon="reply"></mdb-icon> </a> </h5> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div class="media d-block d-md-flex mt-4"> <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (27).webp" alt="Generic placeholder image"> <div class="media-body text-center text-md-left ml-md-3 ml-0"> <h5 class="font-weight-bold mt-0"> <a href="">Tommy Smith</a> <a href="" class="pull-right"> <mdb-icon fas icon="reply"></mdb-icon> </a> </h5> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> <!-- Quick Reply --> <div class="form-group mt-4"> <label for="quickReplyFormComment">Your comment</label> <textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea> <div class="text-center my-4"> <button mdbBtn color="primary" size="sm" mdbWavesEffect type="submit">Post</button> </div> </div> <div class="media d-block d-md-flex mt-3"> <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp" alt="Generic placeholder image"> <div class="media-body text-center text-md-left ml-md-3 ml-0"> <h5 class="font-weight-bold mt-0"> <a href="">Sylvester the Cat</a> <a href="" class="pull-right"> <mdb-icon fas icon="reply"></mdb-icon> </a> </h5> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </div> </div> </div> </div> <div class="media d-block d-md-flex mt-3"> <img class="card-img-64 d-flex mx-auto mb-3" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).webp" alt="Generic placeholder image"> <div class="media-body text-center text-md-left ml-md-3 ml-0"> <h5 class="font-weight-bold mt-0"> <a href="">Caroline Horwitz</a> <a href="" class="pull-right"> <mdb-icon fas icon="reply"></mdb-icon> </a> </h5> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa officia deserunt mollitia animi, id est laborum et dolorum fuga. </div> </div> <!--Pagination --> <nav class="d-flex justify-content-center mt-5"> <ul class="pagination pg-blue mb-0"> <!--First--> <li class="page-item disabled"> <a class="page-link">First</a> </li> <!--Arrow left--> <li class="page-item disabled" mdbWavesEffect> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active waves-light" mdbWavesEffect> <a class="page-link">1</a> </li> <li class="page-item" mdbWavesEffect> <a class="page-link">2</a> </li> <li class="page-item" mdbWavesEffect> <a class="page-link">3</a> </li> <li class="page-item" mdbWavesEffect> <a class="page-link">4</a> </li> <li class="page-item" mdbWavesEffect> <a class="page-link">5</a> </li> <!--Arrow right--> <li class="page-item" mdbWavesEffect> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> <!--Last--> <li class="page-item" mdbWavesEffect> <a class="page-link">Last</a> </li> </ul> </nav> <!--Pagination --> </section> <!--Section: Comments-->