Develop Reference

Angular How to send value from one Sibling to another and send it back changed to the first sibling

I'd like to ask how can I send data from one sibling component to another and send it back with changed value?
I need to add bootstrap effect fadeInDown to a newly added comment in my comments section.
It works but unfortunately it affects all of the comments when I reload the page and the effect is also added when I edit a comment.
I need to send boolean value on method addComment from new-comment component to comment component but then I need that value in new-component to become false again. Now it's false and after using addComment method it becomes true forever. How can I handle this?
I will be glad for any advice
This is my comment section:
Comment section
This is the structure of my files: Files structure
These are the components I'm working on:
Comment section HTML
<h6>Comments: ({{commentsCount}})</h6>
<app-new-comment class="d-block mt-3" [requestId]="requestId" (update)="updateComments()">
</app-new-comment>
<app-comment *ngFor="let comment of comments; let i = first"
[ngClass]="{'fadeInDown': i}"
class="d-block mt-3 animated"
[comment]="comment"
(update)="updateComments()"></app-comment>
Comment section TS
export class CommentSectionComponent implements OnInit, OnDestroy {
#Input() requestId: string
comments: CommentDetailsDto[]
commentsCount = 0
private subscription: Subscription
constructor(
private commentsService: CommentsService,
private alert: AlertService
) {
}
ngOnInit(): void {
this.updateComments()
}
ngOnDestroy(): void {
this.unsubscribe()
}
updateComments(): void {
this.unsubscribe()
this.subscription = this.commentsService.getComments(this.requestId)
.subscribe({
next: (comments: CommentDetailsDto[]) => {
this.comments = comments.reverse()
this.commentsCount = this.getCommentsCount(comments)
},
error: (error: HttpErrorResponse) => {
this.alert.handleHttpError(error)
}
})
}
private getCommentsCount(comments: CommentDetailsDto[]): number {
return comments.reduce(
(cnt, comment) => cnt + 1 + (comment.replies ? this.getCommentsCount(comment.replies) : 0),
0
)
}
private unsubscribe(): void {
if (this.subscription instanceof Subscription) {
this.subscription.unsubscribe()
}
}
}
Comment section SCSS
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
animation-name: fadeInDown;
}
New comment component HTML
<div class="d-flex">
<app-user-image class="mr-3"></app-user-image>
<textarea #textArea class="d-block" placeholder="Add comment" [(ngModel)]="newComment">
</textarea>
</div>
<div class="text-right mt-3">
<button class="btn btn-primary font-weight-bold px-5" type="button"
[disabled]="!newComment" (click)="submit()">
Post
</button>
</div>
New comment TS
export class NewCommentComponent implements OnInit {
#ViewChild('textArea') textArea: ElementRef<HTMLTextAreaElement>
#Input() requestId?: string
#Input() comment?: CommentDetailsDto
#Output() update = new EventEmitter()
newComment: string
private readonly commentResponseObserver = {
error: (error: HttpErrorResponse) => {
this.alert.handleHttpError(error)
},
complete: () => {
delete this.newComment
this.update.emit()
this.alert.showSuccess('Comment submitted successfully')
}
}
constructor(
private commentsService: CommentsService,
private alert: AlertService,
private route: ActivatedRoute
) {
}
ngOnInit(): void {
if (this.comment) {
this.textArea.nativeElement.focus()
}
}
submit(): void {
if (this.requestId) {
this.addComment()
} else if (this.comment) {
this.addReply()
}
}
addComment(): void {
if (this.newComment) {
this.commentsService.addComment(this.requestId, this.newComment)
.subscribe(this.commentResponseObserver)
}
}
addReply(): void {
if (this.newComment) {
this.commentsService.addReply(this.route.snapshot.queryParamMap.get('requestId'), this.comment, this.newComment)
.subscribe(this.commentResponseObserver)
}
}
}
Comment component HTML
<div class="comment">
<app-user-image></app-user-image>
<div class="position-relative d-inline-block flex-fill">
<div class="d-flex justify-content-between align-items-center">
<div><strong>{{comment.author.name}} / {{comment.author.id}}</strong><span
class="date">{{comment.created | krakenDateTime}}</span></div>
<div class="actions">
<button *ngIf="this.hateoas.supports(comment, 'update') && !edit"
type="button" class="bg-transparent border-0" title="Edit"
(click)="toggleEdit()"><i class="icon-kraken icon-kraken-edit"></i></button>
<button *ngIf="this.hateoas.supports(comment, 'delete')"
type="button" class="bg-transparent border-0" title="Delete"
(click)="displayDeletionConfirmation()"><i class="icon-kraken icon-kraken-trash"></i></button>
</div>
</div>
<textarea *ngIf="edit; else readonlyComment"
#textarea
class="d-block w-100"
style="min-height: 7rem;"
[rows]="rows()"
[(ngModel)]="commentContent"></textarea>
<ng-template #readonlyComment>
<div [innerHTML]="commentContentHtml()"></div>
</ng-template>
<strong *ngIf="showReplyButton"
class="reply-button"
(click)="toggleReplyComponent()">Reply</strong>
</div>
</div>
<div *ngIf="edit" class="animated fadeIn text-right mt-3">
<button class="btn btn-sm discard" (click)="cancelEdit()">Discard</button>
<button class="btn btn-sm ml-2 update" (click)="updateComment()">Update</button>
</div>
<div class="replies">
<app-new-comment *ngIf="showNewReplyWindow"
class="d-block mt-3"
[comment]="comment"
(update)="this.update.emit()"></app-new-comment>
<app-comment *ngIf="firstReply"
class="d-block my-3"
[comment]="firstReply"
(update)="update.emit()"></app-comment>
<div *ngIf="moreReplies.length" class="replies-toggle" (click)="showMoreReplies =
!showMoreReplies">
<div class="horizontal-bar"></div>
<span class="mx-3">{{showMoreReplies ? 'Hide' : 'See'}} {{moreReplies.length}} more
comments</span>
<div class="horizontal-bar"></div>
</div>
<div *ngIf="showMoreReplies">
<app-comment *ngFor="let reply of moreReplies"
class="d-block my-3"
[comment]="reply"
(update)="update.emit()"></app-comment>
</div>
<span id="temporaryLastRow"></span>
Comment TS
export class CommentComponent implements OnInit {
#ViewChild('textarea', {static: true}) textarea: ElementRef<HTMLTextAreaElement>
#Input() comment: CommentDetailsDto
#Output() update = new EventEmitter()
edit = false
showReplyButton = false
showNewReplyWindow = false
showMoreReplies = false
commentContent: string
firstReply: CommentDetailsDto
moreReplies: CommentDetailsDto[]
constructor(
private commentsService: CommentsService,
private modalFactoryService: ModalFactoryService,
public hateoas: HateoasService,
private alert: AlertService
) {
}
ngOnInit(): void {
this.commentContent = this.comment.content
this.showReplyButton = this.hateoas.supports(this.comment, 'reply')
this.moreReplies = this.comment.replies.reverse().slice(1)
this.firstReply = this.comment.replies[0]
}
toggleEdit(): void {
this.edit = !this.edit
}
updateComment(): void {
this.commentsService.updateComment(this.comment, this.commentContent)
.subscribe({
error: (error: HttpErrorResponse) => {
this.alert.handleHttpError(error)
},
complete: () => {
this.alert.showSuccess('Comment updated successfully')
this.update.emit()
}
})
}
cancelEdit(): void {
this.edit = false
this.commentContent = this.comment.content
}
displayDeletionConfirmation(): void {
this.modalFactoryService.openConfirmationModal(
'Delete Comment',
{
message: 'Are you sure you want to delete this comment?',
yesOptionButton: 'Yes',
noOptionButton: 'No'
},
() => {
this.hateoas.execute(this.comment, 'delete')
.subscribe({
error: (error: HttpErrorResponse) => {
this.alert.handleHttpError(error)
},
complete: () => {
this.alert.showSuccess('Comment deleted successfully')
this.update.emit()
}
})
}
)
}
toggleReplyComponent(): void {
this.showNewReplyWindow = !this.showNewReplyWindow
}
commentContentHtml(): string {
return this.commentContent.replace(/\n/g, '<br>')
}
rows(): number {
const newLines = this.commentContent.match(/\n/g) || []
return newLines.length + 1
}
}
export interface Author {
id: string
name: string
}
export interface CommentDetailsDto extends Resource {
content: string
author: Author
replies: CommentDetailsDto[]
created: string
}

How to use debounce on List of items in angular

How to use debounce time in an angular input search while searching through the list of items.Should i use RXJS and how to put it in my function filterReports? Can you please show me in code what i should do?
Code here:
protected reports: Array<ReportGroupModel> = [];
protected filteredReports: Array<ReportGroupModel> = [];
constructor(
protected route: ActivatedRoute,
protected httpService: HttpService
) {
super(route);
this.titleIcon = 'fa-bar-chart';
this.titleSufixKey = 'reports';
this.filterReports = debounce(this.filterReports, 500);
}
filterReports(filter: any) {
const searchText = filter.target.value?.toUpperCase();
if (searchText) {
let newFilteredReports: Array<ReportGroupModel> = [];
for (let reportGroup of this.reports) {
let foundItems = reportGroup.items.filter(x => x.title.toUpperCase().includes(searchText));
if (foundItems && foundItems.length > 0) {
newFilteredReports.push(new ReportGroupModel(reportGroup.header, foundItems));
}
}
this.filteredReports = newFilteredReports;
}
else
this.filteredReports = this.reports;
}
ngOnInit() {
super.ngOnInit();
this.filteredReports = this.reports;
}
and here is html
<div class="d-flex">
<input search="text" class="form-control mw-200p ml-auto" (keyup)="component.filterReports($event)" autofocus placeholder="{{ 'search' | translate }}"/>
</div>
<div class="d-flex flex-wrap pl-2">
<div *ngFor="let report of component?.filteredReports" class="pr-5 pt-2" style="width: 350px;">
<h3>{{report.header | translate}}</h3>
<ul class="list-unstyled pl-1">
<li *ngFor="let item of report.items">
<i class="fa {{item.icon}} mr-h"></i>
<a class="link" [routerLink]="item.path"> {{item.title}} </a>
<p *ngIf="item.description" class="text-muted">{{item.description}}</p>
</li>
</ul>
</div>
</div>

The easiest way to solve this issue is to use the reactive form module. however, if you want to stick with ngModel, you can do something like this.
searchChanged = new Subject();
protected reports: Array<ReportGroupModel> = [];
protected filteredReports: Array<ReportGroupModel> = [];
and update the subject every time the keyup event update
<div class="d-flex">
<input search="text" class="form-control mw-200p ml-auto" (keyup)="onKeyUp($event)" autofocus placeholder="{{ 'search' | translate }}"/>
</div>
//.ts
onKeyUp(value: string) {
this.searchChanged.next(value)
}
Now, you can use searchChanged subject to debounce the event update
constructor(
protected route: ActivatedRoute,
protected httpService: HttpService
) {
...
this.searchChanged.pipe(
debounceTime(300)
// You better add takeUntil or something to unsubscribe this observable when this component destroy
).subscribe(value => {
this.filterReports(value);
})
}

How do I stop Angular from automatically alphabetizing object keys?

I have this array...
public incidents: any[] = [
{
id: 1,
name: "Default Case Set",
type: "CASEWORK",
str: 34,
mtdna: 0,
ystr: 0,
xstr: 0,
snps: 0
}
]
I'm passing it into a modal like this...
public openEditModal(id: number): void {
this.incidentToBeEdited = this.incidents.filter(result => result.id == id).pop();
const initialState: ModalOptions = {
initialState: {
items: this.incidentToBeEdited,
title: 'Edit Incident'
}
};
// Close modal
this.bsModalRef = this.modalService.show(EditModalComponent, initialState);
}
The problem is that the keys in the object in the incidents array are automatically alphabetized.
When I console the "this.incidentToBeEdited" variable, I get this...
{
mtdna: 0
name: "Default Case Set"
snps: 0
str: 34
type: "CASEWORK"
xstr: 0
ystr: 0
}
So the object that gets sent to the modal (for display purposes) is automatically alphabetized.
I don't want this because I want the fields to appear as they do in the table, which is how they are in the original incidents array.
Is there anyway I can override Angular's need to alphabetize an object?
Here is the code for EditModalComponent...
export class EditModalComponent implements OnInit {
constructor(
public bsModalRef: BsModalRef,
private http: HttpClient,
private formBuilder: FormBuilder) {
this.items = this.items;
this.bsModalRef = this.bsModalRef;
this.editModal = this.formBuilder.group({});
}
// Page loading properties
public httpRequestInProgress: boolean = false;
public pageLoaded: boolean = false;
public pageLoadError: string = '';
public pageLoading: boolean = true;
// Properties
public editModal: FormGroup;
public items?: any;
public title?: string;
// Methods
ngOnInit(): void {
this.editModal = this.formBuilder.group(
this.items
)
console.log("this.items", this.items);
// Remove id from list of items
const itemsInAnArray = [this.items];
itemsInAnArray.forEach((item: any) => delete item.id);
this.pageLoading = false;
this.pageLoaded = true;
}
}
Here is the HTML for EditModalComponent...
<form [formGroup]="editModal" *ngIf="this.items">
<div class="row">
<div class="col-sm-12">
<div *ngFor="let item of this.items | keyvalue">
<div class="col-sm-12 mb-3">
<label class="text-capitalize" for="firstName">{{item.key}}</label>
<input class="form-control"
id="{{item.key}}"
value="{{item.value}}"
formControlName="{{item.key}}">
</div>
</div>
</div>
<div class="mt-3">
<button class="btn btn-primary float-start"
type="button"
(click)="saveAsync()">
Save
</button>
<button class="btn btn-secondary me-1 float-start"
type="button"
(click)="bsModalRef.hide()">
Cancel
</button>
</div>
</div>
</form>
```

Angular component doesn't assign value from observable service getter, why?

I'm working on building a set of filters, so I'm just trying to make use of the salesChannels array content in my view, which only gets populated when clicking the button with the test() function. The log in ngOnInit outputs an empty array the first time, but works correctly after pressing the button.
The getOrganisationChannels returns an observable.
What causes this behavior and how do I handle it properly? I tried using an eventEmitter to try and trigger the populating but that doesn't work.
TYPESCRIPT
export class SalesChannelFilterComponent implements OnInit {
constructor(
public organizationService: OrganizationService
) { }
#Input() organizationId: any;
salesChannels: Array<any> = [];
selectedChannels: Array<any> = [];
allSelected: Array<any> = [];
ngOnInit() {
this.getChannels();
console.log(this.salesChannels);
}
getChannels() {
this.organizationService.getOrganizationChannels(this.organizationId).subscribe(
salesChannels => {
this.salesChannels = salesChannels;
})
}
test() {
console.log(this.salesChannels);
}
}
HTML
<div>
{{ salesChannels | json }}
</div>
<button (click)="test()">test</button>
<div *ngFor="let channel of salesChannels; let i = index;" class="checkbox c-checkbox">
<label>
<input type="checkbox">
<span class="fa fa-check"></span>{{channel.name}}
</label>
</div>

This is expected behaviour since you are populating the salesChannel in the subscription of an Observable. It's recommended that you use aysnc pipe to let angular check for changes and update the view accordingly.
Component.ts :
export class SalesChannelFilterComponent implements OnInit {
constructor(
public organizationService: OrganizationService
) { }
#Input() organizationId: any;
salesChannels$!: Observable<Array<any>>;
selectedChannels: Array<any> = [];
allSelected: Array<any> = [];
ngOnInit() {
this.getChannels();
console.log(this.salesChannels);
}
getChannels() {
this.salesChannels$ = this.this.organizationService.getOrganizationChannels(this.organizationId);
}
test() {
console.log(this.salesChannels);
}
}
In your template:
<button (click)="test()">test</button>
<div *ngFor="let channel of salesChannels$ | async; let i = index;" class="checkbox c-checkbox">
<label>
<input type="checkbox">
<span class="fa fa-check"></span>{{channel.name}}
</label>
</div>
More details: https://angular.io/api/common/AsyncPipe

I recommend using AsyncPipe here:
<div>{{ salesChannels | async}}</div>
and in .ts:
salesChannels = this.organizationService.getOrganizationChannels(this.organizationId)

Angular display Filtering Incorrectly

When a user selects a tag, I want to display only the blogs containing that tag.
For example when a user selects the '#C#' tag only posts with this tag will be displayed.
My set up is as follows: I have an array of blogs which contain post tags which contain tags:
export interface IBlog
{
id: number
title: string
content: string
subscription: number
time: string
created: Date;
imageUrl: string
coverImage: string
image: string
likes: number
body: string
comments?:{
message: string
handle: string,
city: string,
country: string
},
articleLinkUrl?: string,
sessions: ISession[],
mainComments: IComments[],
postTags: IPostTags[]
}
export interface ISession
{
id: number,
name: string,
presenter: string,
duration: number,
level: string,
abstract: string,
voters: string[]
}
export interface IComments
{
id: number,
message: string
}
export interface IPostTags
{
id: number,
tag: ITag[]
}
export interface ITag
{
id: number,
name: string
}
I have a blog-list.component.ts:
import {Component, OnInit} from '#angular/core'
import { BlogService} from './shared/blog.service';
import { ActivatedRoute } from '#angular/router';
import { IBlog } from './shared';
#Component({
template: `
<div>
<h1>Upcoming Blogs</h1>
<hr/>
<div class= "btn-group btn-group-sm">
<button class="btn btn-default" [class.active] = "filterBy==='all'" (click) = "filterBy='all'">All</button>
<button class="btn btn-default" [class.active] = "filterBy==='c#'" (click) = "filterBy='#C#'">C#</button>
<button class="btn btn-default" [class.active] = "filterBy==='angular'" (click) = "filterBy='#Angular'">Angular</button>
<button class="btn btn-default" [class.active] = "filterBy==='netcore'" (click) = "filterBy='#NetCore'">.NET Core</button>
</div>
<div class ="row">
<blog-thumbnail [filterBy]="filterBy" [blogs] = "blogs"></blog-thumbnail>
<div class='row' style="margin-bottom: 10px;">
<div class="col-md-2">
<h3 style="margin:0">Sort by Tag</h3>
</div>
<div class="col-md-7">
<div class= "btn-group btn-group-sm" style="margin-right: 20px; margin-left: 20px;">
<button class="btn btn-default" [class.active] = "sortBy==='name'" (click) = "sortBy='name'">By Name</button>
<button class="btn btn-default" [class.active] = "sortBy==='votes'" (click) = "sortBy='votes'">By Votes</button>
</div>
</div>
</div>
</div>
</div>`
})
export class BlogListComponent implements OnInit{
blogs:IBlog[]
filterBy: string = 'all';
constructor(private blogService: BlogService, private route: ActivatedRoute){
}
ngOnInit(){
this.blogs = this.route.snapshot.data['blogs']
}
}
This displays a blog-thumbnail component
import {Component, Input, EventEmitter, Output, OnChanges} from '#angular/core'
import { forEach } from '#angular/router/src/utils/collection';
import { IBlog, IPostTags } from './shared';
#Component ({
selector: 'blog-thumbnail',
template: `
<div class="row" *ngFor="let blog of blogsSession">
<div [routerLink] = "['/blogs', blog.id]" class="well hoverwell thumbnail">
<img src={{blog?.coverImage}}/>
<h2>{{blog?.title | uppercase}}</h2>
<div>{{blog?.created | date}}</div>
<div>Content: {{blog?.content}}</div>
<div>Tags: {{blog?.content}}</div>
<div well-title *ngIf="blog?.mainComments">
{{blog?.likes}} Reactions
<i *ngIf="blog?.likes >= 1" class="glyphicon glyphicon-heart-empty" style="color:red"></i>
{{blog.mainComments.length}} Comments
<i *ngIf="blog.mainComments.length >= 1" class="glyphicon glyphicon-comment" ></i>
</div>
<div well-title *ngIf="blog?.postTags">
{{blog.postTags.length}} Post Tags
<i *ngIf="blog.postTags.length >= 1" class="glyphicon glyphicon-comment" ></i>
</div>
</div>
`,
styles:[
`
.thumbnail {min-height: 210px;}
.pad-left {margin-left: 10px;}
.well div { color: #bbb;}
`]
})
export class BlogThumbnailComponent implements OnChanges {
#Input() blog: IBlog
#Input() filterBy: string;
#Input() blogs: IBlog[];
blogsSession: IBlog[] = [];
getStartTimeStyle(): any{
if (this.blog && this.blog.time === '7:30pm')
return{color: '#003300', 'font-weight' : 'bold'}
return{};
}
ngOnChanges(){
if(this.blogs){
this.filterSessions(this.filterBy);
//this.sortBy === 'name' ? null : null;
}
}
filterSessions(filter){
if(filter === 'all'){
this.blogsSession= this.blogs.slice(0);
}
else
{
this.blogsSession = this.blogs.filter(blog => {
return blog.postTags.filter( postTag =>{
postTag.tag.name === filter
})
})
this commented out code works but it is not what i want
// this.blogsSession = this.blogs.filter(blog => {
// return blog.postTags.length < 2;
//})
}
}
}
The following section off code is where I am having my problem. It does not work:
this.blogsSession = this.blogs.filter(blog => {
return blog.postTags.filter( postTag =>{
postTag.tag.name === filter
})
})
I have spent a large amount of time on this. Would anybody be able to explain what I am doing wrong here?

The function used in the filter() method should return true or false (or actually a value that coerces to true or false). Your function returns an array; you are filtering blog.postTags.
Try this instead:
this.blogsSession = this.blogs.filter(blog => {
return blog.postTags.some(postTag => postTag.tag.name === filter)
})
The some() method will return true if at least one of the items in the array meet the conditions used in the function.

Why do you have 2 filter operators? I think this:
this.blogsSession = this.blogs.filterpostTags.filter( postTag =>{
postTag.tag.name.toLocaleLowerCase() === filter.toLocaleLowerCase()
})
should be enough.