Sample HTML Markup
First, we add some sample HTML markup. When the Angular application add this blog post to the list of posts, we should see the mark-up below highlighted by prismjs to show it in a pretty format.
<html>
<head>
<title>Sample Page<title>
</head>
<body>
<div>This is a DIV element.</div>
</body>
</html>
Sample Typescript
Next add sometypescript code to see how the Angular application handles that. This is typescript defining the RecentPosts component in my application:import {Component, OnInit, Input, AfterViewChecked, OnDestroy} from '@angular/core';
import {Observable, Subscription} from 'rxjs';
import { PostList } from '../../models';
import { BlogService } from '../../services/blog.service';
import { HighlightService } from '../../../../core/services/highlight.service';
@Component({
selector: 'sbp-recent-posts',
templateUrl: './recent-posts.component.html',
styleUrls: ['./recent-posts.component.scss']
})
export class RecentPostsComponent implements OnInit, OnDestroy, AfterViewChecked {
@Input()blogId: string;
postList: PostList;
// posts$: Observable<postlist>;
subscriptions: Subscription[] = [];
private highlightsed = false;
constructor(private blogSvc: BlogService,
private highlightService: HighlightService) { }
ngOnInit(): void {
if (this.blogId) {
this.subscriptions.push(
this.blogSvc.fetchPosts$(this.blogId)
.subscribe((postList: PostList) => {
this.postList = postList;
})
);
}
}
ngOnDestroy(): void {
this.subscriptions.forEach(
(subscription: Subscription) => subscription.unsubscribe()
);
}
ngAfterViewChecked(): void {
if (this.postList && !this.highlightsed) {
this.highlightService.highlightAll();
this.highlightsed = true;
console.log('highlighted!');
}
}
}
SCSS
Now we'll add some samplescss code to see how that looks in the Angular app. It should appear substantially the same as you see here:$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
No comments:
Post a Comment