import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Observable } from 'rxjs'; import { BlogDetails, BlogResponse } from '../models/blog'; import { BlogService }...

1 answer below »
Create Load more button using Angular and Typescript

css:



text-align: center;



color: #F22352;






import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Observable } from 'rxjs'; import { BlogDetails, BlogResponse } from '../models/blog'; import { BlogService } from '../services/blog.service'; import { Router } from '@angular/router'; import { AuthService } from '../../../../providers/auth.service'; import { AuthenticationService } from '../../../../services/authentication.service'; import { SignupComponent } from '../../../../pages/authentication/signup/signup.component'; @Component({ selector: 'anms-blog-list', templateUrl: './blog-list.component.html', styleUrls: ['./blog-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class BlogListComponent implements OnInit { @Input() agentFirstName: string; @Input() agentLastName: string; @Input() agendId: string; @Input() agentType: string; @Input() agentEmail: string; @Input() firstName: string; @Input() lastName: string; blogs: BlogDetails[]; blogArray$: Observable; blogOutput$: Observable; paginatorEnabled: boolean; constructor( private blogService: BlogService, private router: Router, private authService: AuthService, private authenticationService: AuthenticationService ) {} ngOnInit(): void { this.paginatorEnabled = true; this.blogArray$ = this.blogService.getBlogs(); // this.blogOutput$ = this.blogService.firstPaginate(); // this.blogOutput$.subscribe(blog => { // this.blogs = blog as BlogDetails[]; // }); } navigateBlog(id: string) { this.router.navigateByUrl('/blogs/' + id); } editBlog(id: string) { this.router.navigateByUrl('/blogs/edit/' + id); } onChangePage() { // this.blogOutput$ = this.blogService.paginateNext(); // this.questionsOutput$.subscribe(question => { // this.questions = question as Question[]; // }); // if (this.questions.length === this.previousLength) // this.paginatorEnabled = false; // this.previousLength = this.questions.length; } createBlog() { // if (this.isUserLoggedIn) { // this.router.navigateByUrl('/blogs/add'); // } else { // this.authenticationService.showSignUp(SignupComponent, { // isAgent: null, // redirect: '/blogs/add', // userAutoLoginAfterSignUp: true // }); // } this.router.navigateByUrl('/blogs/add'); } get agentName() { return this.agentFirstName + ' ' + this.agentLastName; } get isUserLoggedIn() { return this.authService.isCurrentSession; } } //displayMorePosts() { //} import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { BlogListComponent } from './blog-list.component'; describe('BlogListComponent', () => { let component: BlogListComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [BlogListComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(BlogListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); @import '../../../../../styles-variables'; .cards { margin: 0px; font-style: normal; font-family: 'OpenSansRegular'; .blog-card { margin: 20px; width: 340px; height: 534px; padding: 0px; display: inline-block; border: 1px solid #e8f3fb; box-shadow: 0px 20px 60px #e8ebee; border-radius: 8px; } .blog-image { height: 230px; width: 100%; margin-bottom: 10px; border-radius: 8px 8px 0px 0px; } .card-title { font-family: 'HKGroteskRegular'; font-weight: bold; font-size: 24px; line-height: 32px; letter-spacing: 0.2px; color: $reviewmyagent-text-color-2; } .author { position: relative; float: right; bottom: 30px; left: 10%; width: 48px; height: 48px; border-radius: 50%; border: 2px solid $reviewmyagent-primary-button-font-color; box-shadow: 0px 15px 25px rgba(21, 37, 72, 0.1); } .author-image { width: 100%; height: 100%; border-radius: 50%; border: 2px solid $reviewmyagent-primary-button-font-color; background-color: $reviewmyagent-primary-button-font-color; background-repeat: no-repeat; background-position: 50%; background-size: cover; } .edit-button { position: relative; float: right; float: right; bottom: 45%; right: 10px; .edit { width: 85px; padding: 10px; background: #3f6a8a; border-radius: 10px; color: $reviewmyagent-primary-button-font-color; text-decoration: none; border: 0px; opacity: 50%; } } p { margin: 0px; font-size: 18px; line-height: 32px; color: $reviewmyagent-text-color-4; } .read-article { font-weight: bold; font-size: 18px; line-height: 25px; text-align: center; color: $reviewmyagent-primary-color; background-color: $reviewmyagent-primary-button-font-color; border: 0px; mat-icon { position: relative; top: 7px; } } .category { display: inline; font-family: 'OpenSansRegular'; font-style: normal; font-weight: bold; font-size: 16px; line-height: 22px; color: $reviewmyagent-text-color-2; } .tag { font-family: 'OpenSansRegular'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 16px; color: $reviewmyagent-text-color-4; } .date { display: inline; font-family: 'OpenSansRegular'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; color: #b3bdc5; } } @for $blog from 1 to 4 { .cards:nth-child(3n + #{$blog}) { display: inline-block; justify-content: space-between; } } .load-more-container { padding: 7px; margin-left: 45%; margin-top: 10px; margin-bottom: 10px; } .load-more-button { text-align: center; } Edit {{blog.BlogType}} · {{blog.created_at | date: 'MMM d, y'}} For {{blog.BlogTag}} {{blog.BlogTitle}} {{blog.BlogContent | slice:0:50}}... Read Article arrow_forward add Add Blog Load more
blog-listcomponent-ycnbqwoq.ts blog-listcomponentspec-e1gnolnt.ts blog-listcomponent-c3yfi11v.scss blog-listcomponent-hriwujbw.html
Answered Same DaySep 08, 2021

Answer To: import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import {...

Amit Kumar answered on Sep 09 2021
142 Votes
blog-list/blog-list.component.html






Edit

{{blog.BlogType}}


· {{blog.created_at | date: 'MMM d, y'}}

For {{blog.BlogTag}}


{{blog.BlogTitle}}



{{blog.BlogContent | slice:0:50}}...

Read Article arrow_forward



Load more
add Add Blog
blog-list/blog-list.component.scss
@import '../../../../../styles-variables';
.cards {
margin: 0px;
font-style: normal;
font-family: 'OpenSansRegular';
.blog-card {
margin: 20px;
width: 340px;
height: 534px;
padding: 0px;
display: inline-block;
border: 1px solid #e8f3fb;
box-shadow: 0px 20px 60px #e8ebee;
border-radius: 8px;
}
.blog-image {
height: 230px;
width: 100%;
margin-bottom: 10px;
border-radius: 8px 8px 0px 0px;
}
.card-title {
font-family: 'HKGroteskRegular';
font-weight: bold;
font-size: 24px;
line-height: 32px;
letter-spacing: 0.2px;
color: $reviewmyagent-text-color-2;
}
.author {
position: relative;
float: right;
bottom: 30px;
left: 10%;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid $reviewmyagent-primary-button-font-color;
box-shadow: 0px 15px 25px rgba(21, 37, 72, 0.1);
}
.author-image {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid $reviewmyagent-primary-button-font-color;
background-color: $reviewmyagent-primary-button-font-color;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
}
.edit-button {
position: relative;
float: right;
float: right;
bottom: 45%;
right: 10px;
.edit {
width: 85px;
padding: 10px;
background: #3f6a8a;
...
SOLUTION.PDF
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here
Have files?