Here is my code,
HTML:
<div *ngFor="let comment of comments | orderBy: '-'+orderBy">
<div class="comment-item">
<div class="row">
<div class="col-md-8">
{{comment.userName}}
</div>
<div class="col-md-4">
<div class="comment-timeago">
{{comment.time | timeAgo}}
</div>
<div class="likedicon">
<i class="fa fa-heart-o disliked" aria-hidden="true" (click)="likeComment(comment._id, comment)"></i>
<i class="fa fa-heart liked" aria-hidden="true" *ngIf="comment.liked == 'liked'" (click)="dislikeComment(comment._id, comment)"></i>
</div>
<div class="like-num">
{{comment.like}}
</div>
</div>
</div>
</div>
</div>
File component.ts:
likeComment(commentId, comment) {
localStorage[commentId] = "liked";
comment.liked = localStorage[commentId];
comment.like ++;
this.dataService.likeComment(commentId).subscribe(
// Post data to server
error => console.log(error)
)
}
dislikeComment(commentId, comment) {
localStorage[commentId] = "disliked";
comment.liked = localStorage[commentId];
comment.like --;
this.dataService.dislikeComment(commentId).subscribe(
// Post data to server
error => console.log(error)
)
Every comment can switch liked or disliked independently, but I have to use localStorage to decide what status should display. Maybe like:
*ngIf="localStorage.getItem(comment._Id) == 'liked'"
Unfortunately, it's the wrong syntax. I find the getter working on my other case, and the reference is from Angular2 How to display localStorage value inside HTML5 template?.
In this case, I have no idea to do that, because I can't use get commentLike() in my function, neither use a global variable. How do I solve it?
To get items from localStorage, use the getItem() method. getItem() allows you to access the data stored in the browser's localStorage object.
Save the Angular app and run the application. After the app gets loaded, type in localStorage from the browser console and you will be able to see the encrypted data in local storage.
you can set item in login component and get item in vehicle component. var user = localstorage. getitem('currentuser'); in component file.
When you are trying to use *ngIf="localStorage.getItem(comment._Id) == 'liked'"
it's trying to find this.localStorage in component.ts, but it doesn't exist, so it's throwing an error... Things like localStorage is common to use wherever required so keep it in global.ts which can be accessed easily...
In your global.ts
, add a function like this:
export class GlobalApp {
constructor() {}
public localStorageItem(id: string): string {
return localStorage.getItem(id);
}
Now update your component.ts
:
import {GlobalApp} from '../helpers';
export class MyComponent {
constructor (public app: GlobalApp) {
}
}
Now it's ready to easily use in any template as we have a global declared function:
*ngIf="app.localStorageItem(comment._Id) == 'liked'"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With