Develop Reference

Console.log prints the cart but can't bind it to the html. ANGULAR

What am I doing wrong?
As you can see the console.log prints the output fine but I can't seem to see it on the webpage.
get-cart.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Cart } from 'src/app/models/cartModel';
import { UsersService } from 'src/app/services/users.service';
#Component({
selector: 'app-get-one-cart',
templateUrl: './get-one-cart.component.html',
styleUrls: ['./get-one-cart.component.css']
})
export class GetOneCartComponent implements OnInit {
cart: Cart;
constructor(
private route: ActivatedRoute,
private userService: UsersService
) { }
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
this.userService.getCartForUser(id)
.subscribe(data => {
this.cart = data;
console.log(this.cart)
});
}
}
get-cart.html
<div class="content-box">
<a routerLink="/users">
<button>Back</button>
</a>
<div *ngIf="cart">
<h2>{{cart._id}}</h2>
<p>{{cart.userId}}</p>
<div *ngFor="let product of cart.products">
<p>{{product.productId}}</p>
<p>{{product.quantity}}</p>
<p>{{product.price}}</p>
</div>
</div>
</div>
console.log and webpage outputs

Got the answer! I just had to set
await Cart.find
to
await Cart.findOne

Angular does not rerender on Input() change

Whatever i do angular does not detect change on talks array. I have a handleSubmit function to send the toolbar. Toolbar use it to send the changes to parent from input field.
My app.component.ts file
import { Component, Type, OnChanges, SimpleChanges } from '#angular/core';
import { getResponse } from '../api/API';
declare module '../api/API' {
export interface NlpAPI {
getResponse(data: any): Promise<any>;
}
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnChanges {
talks: string[];
title: string;
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
constructor() {
this.talks = [];
this.title = 'Talks';
}
ngOnInit() {
this.talks.push('Welcome to ProjectX! How can I help you?');
this.talks.push('I am a chatbot. I can help you with your queries.');
}
handleSubmit(data: any): void {
this.talks.push(data.talk);
}
messageResponse() {
// #ts-ignore: Object is possibly 'null'.
const x = document.getElementById('txt').value;
// #ts-ignore: Object is possibly 'null'.
document.getElementById('output').innerHTML =
'Your message is ' + '"' + x + '"';
}
}
My app.component.html
<!-- Toolbar -->
<app-custom-toolbar [handleSubmit]="handleSubmit"></app-custom-toolbar>
<!-- Highlight Card -->
<app-text-area [talksFromUser]="talks" [title]="title"></app-text-area>
<!-- Bottombar -->
<router-outlet></router-outlet>
My text-area.component.ts file
import { Component, Input, OnChanges, SimpleChanges } from '#angular/core';
#Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.css'],
})
export class TextAreaComponent implements OnChanges {
#Input() talksFromUser: string[] = [];
#Input() title: string = '';
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}
My text-area.component.html
<div class="main-text-area">
<div *ngFor="let item of talksFromUser">{{ item }}</div>
</div>
custom-toolbar.component.ts file
import { Component, Input, OnInit } from '#angular/core';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-custom-toolbar',
templateUrl: './custom-toolbar.component.html',
styleUrls: ['./custom-toolbar.component.css'],
})
export class CustomToolbarComponent implements OnInit {
talks: string[] = [];
#Input() handleSubmit!: (args: any) => void;
constructor() {}
ngOnInit(): void {}
onSubmit(f: NgForm) {
this.handleSubmit(f.value);
f.resetForm();
}
}
I tried also
this.talks = [...this.talks, data.talk]
Thank you all.

There are two issues in your code:
First one, you are calling handleSubmit("string") (so data is a string), but you are pushing data.talk, which is undefined (so talks will be [undefined, undefined, ...]). To fix it, use data:
handleSubmit(data: any): void {
this.talks.push(data); // use "data" instead of "data.talk"
}
Second one, you are using a AppComponent method into CustomToolbarComponent class. You need to keep the this scope of AppComponent. Also, you should use arrow functions:
handleSubmit = (data: any): void => {
this.talks.push(data);
}

Error message : can't bind to xxx since it isn't a known property of yyy when calling angular component

I created in my Angular project a shared component named useraccount-type. I use it into a form but I have this error message :
Can't bind to 'selectedType' since it isn't a known property of 'app-useraccount-type'.
If 'app-useraccount-type' is an Angular component and it has 'selectedType' input, then verify that it is part of this module.
If 'app-useraccount-type' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
The html part looks this:
<div [formGroup]="myForm">
<select class="form-select form-control" id="useraccountType" formControlName="useraccountType" [(ngModel)]="selectedType">
<option *ngFor="let t of types" [ngValue]="t.description" >{{t.description}}</option>
</select>
</div>
The ts part looks this :
import { Component, Input, OnInit } from '#angular/core';
import { ControlContainer, FormGroup } from '#angular/forms';
import { ErrorHandlerService } from 'src/app/services/error-handler.service';
import { RepositoryService } from 'src/app/services/repository.service';
import { environment } from 'src/environments/environment';
// Classes
import { Useraccounttype } from './../../../model/useraccounttype.model';
#Component({
selector: 'app-useraccount-type',
templateUrl: './useraccount-type.component.html',
styleUrls: ['./useraccount-type.component.css']
})
export class UseraccountTypeComponent implements OnInit {
public errorMessage: string = '';
#Input() public types: Useraccounttype[];
#Input() public selectedType?: string ="";
#Input() public myForm: FormGroup;
constructor(private repository: RepositoryService, private controlContainer: ControlContainer, private errorHandler: ErrorHandlerService) { }
ngOnInit(): void {
this.myForm = <FormGroup>this.controlContainer.control;
this.getUserAccountTypes();
console.log('Selected type' + this.selectedType);
}
getUserAccountTypes = () => {
let apiType: string = environment.apiAddress + 'UserAccountType';
this.repository.getData(apiType)
.subscribe(response => {
this.types = response as Useraccounttype[];
},
(error) => {
this.errorHandler.handleError(error);
this.errorMessage = this.errorHandler.errorMessage;
})
}
}
The compent is used in a form like this:
<form [formGroup]="myForm" autocomplete="off" novalidate>
...
<div class="col-md-12">
<app-useraccount-type name="useraccountType" id="useraccountType" [formGroup]="myForm" [selectedType]="user?.userAccountType?.shortDescription"></app-useraccount-type>
</div>
...
</form>
The error message is on this part :
[selectedType]="user?.userAccountType?.shortDescription"
Is there anybody has an idee of the problem?
Thanks in advance for your help.
PS: for informations I have imported FormModule and ReactiveFormsModule in the app.module.ts

the error means that the component <app-useraccount-type> has no #Input() selectedType

Ok problem is finaly solved.
I forgot to declare the useraccounttypecomponent in the useraccount.module.ts (in the Declaration part and export part).
Thanks

Angular passing data to child component

Hey I am trying to display a simple error message on my login page if the login fails. Following is my login.component.html:
<div class="container shadow login-container">
<div class="row">
<div class="col-sm-12 text-center">
<div class="error-message">
<app-server-error [errorMessage]="error" ></app-server-error> -----> not displaying on screen
</div>
<div class="login-form-container">
<div class="login-input-container">
<input [(ngModel)]="user.email" type="email" placeholder="Enter your email" class="buddha-input"/>
</div>
<div class="login-input-container">
<input [(ngModel)]="user.password" type="password" placeholder="Enter password" class="buddha-input"/>
</div>
<div class="login-input-container">
<button (click)="tryLogin()" class="login-form-button">Login</button>
</div>
</div>
</div>
</div>
</div>
Following is my server-error.component.html:
<p>
{{errorMessage}}
</p>
Following is my server-error.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-server-error',
templateUrl: './server-error.component.html',
styleUrls: ['./server-error.component.css']
})
export class ServerErrorComponent implements OnInit {
#Input() public errorMessage: string;
constructor() { }
ngOnInit() {
}
}
"Error" is not showing up on the screen and I am not getting errors on console either. Please do let me know how I can fix this? Thank you

#Input() public errorMessage: string; expects error to be a string.
Define error like this in .ts
error = 'error message'
Working Demo

With [errorMessage]="error", error should be a variable.
So you need to define it in your component.
But if you want to display the string "error",
then pass it like this [errorMessage]="'error'" or errorMessage="error"

The other posted answer may solve your problem but I would go with Service which will be responsible for showing an error from everywhere in the Application and also you can have a full control on the error component as it is centralized at a one place:
error.service:
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class ErrorService {
constructor() { }
private errorMessages = new BehaviorSubject('');
errorMessage = this.errorMessages.asObservable();
showError(message: string) {
this.errorMessages.next(message)
}
}
Error.Component.ts:
import { Component, OnInit, Input } from '#angular/core';
import {ErrorService } from "../error.service";
#Component({
selector: 'app-server-error',
templateUrl: './server-error.component.html',
styleUrls: ['./server-error.component.css']
})
export class ServerErrorComponent implements OnInit {
private errorMessage : any;
constructor(public errorService : ErrorService) { }
ngOnInit() {
this.errorService.errorMessage.subscribe(value => {
this.errorMessage = value;
})
}
}
App.Component.html:
// show it in app.component
<div class="error-message">
<app-server-error></app-server-error>
</div>
Use (in Login Component):
import { Component, OnInit } from "#angular/core";
import {ErrorService } from "../error.service";
#Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
constructor(public errorService: ErrorService) {}
user = {};
ngOnInit() {}
tryLogin(){
this.errorService.showError('An error');
}
}

Why is the primeng dropdown list no firing?

Disclaimer, I am very new to primeng...
I have the following component
import { Component , OnInit} from '#angular/core';
import { TimeRangesService } from './time.range.service';
#Component({
moduleId : module.id,
selector: 'time-range',
templateUrl: './time.range.component.html',
})
export class TimeRangesControl implements OnInit {
timeRanges: any[];
selectedTimeRange: any;
constructor(private timeRangeService: TimeRangesService) { }
ngOnInit() {
this.timeRangeService.get().then(res => this.timeRanges = res);
}
onChange($event) {
console.log('event');
}
}
I never get the onChange function called.
In my html file, I say:
<div class="content-section implementation">
<p-dropdown
[style]="{'width': '40%', 'height': '30px'}"
onChange="onChange"
[options]="timeRanges"
[(ngModel)]="selectedTimeRange"
placeholder="Select a time range"></p-dropdown>
<p>Selected Time Range: {{selectedTimeRange ? selectedTimeRange.name : 'none'}}</p>
Any ideas what I am doing wrong?

Make the following changes:
html:
(onChange)="onChange($event)"
component.ts:
onChange(event) {
console.log(event);
}
Hope this resolves your problem.