I am using spring boot + angular.
Interpolation is not working for me. Whenever I reload the page I can see the changes in spring boot console but {{product.productId}} is not printing anything in the HTML page.
search.component.html
<div class="form- group col-md-4 offset-4 mt-4 card card-body">
<form >
<input type="text" name="search" [(ngModel)] ="search" placeholder="enter the products">
</form>
</div>
<div *ngFor="let products of products | filter:search" >
{{products.productId}}
</div>
search.component.ts
import { Component, OnInit } from '#angular/core';
import { ProductService } from '../product.service';
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
products;
search:string;
constructor(private service: ProductService) { }
ngOnInit() {
this.service.getAllProducts().subscribe(data=>{
this.products = data ['products'];
});
}
}
product.service.ts (Service method)
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ProductService {
private httpUrl = "http://localhost:8080/products"
constructor(private http: HttpClient) {}
getAllProducts(){
return this.http.get (`${this.httpUrl}`);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './search/search.component';
import { AddProductComponent } from './add-product/add-product.component';
import { FilterPipe } from './filter.pipe';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { ProductService } from './product.service';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
SearchComponent,
AddProductComponent,
FilterPipe
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [ProductService],
bootstrap: [AppComponent]
})
export class AppModule { }
filter.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(products,search:string):any {
if(search){
return products.filter(product=>{
return product.name.toLowerCase().includes(search.toLowerCase())
});
}else{
return products;
}
}
}
I want to display products in search.component.html, everytime I reload the page I can see changes in backend(spring boot terminal) but it is not printing in html page through interpolation.
<div *ngFor="let product of products | filter:search" >
{{product.productId}}
</div>
Change this line.It will work for you.When u are iterating the names should be different.
Related
Due to the requirements of project I need to send data value dataOne in app.component.ts to its app.module.ts so that I can store it in variable moduleValue. Please refer code below and suggest how can achieve this transfer of data within files.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
I'd suggest that you declare a variable or an observable in a service, however, since you mentioned that you need to do this within the same files you might want to export a variable from your component and import it into your module like so:
app.component.ts
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
DATA = this.dataOne;
}
}
export var DATA = '';
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
Here is the solution using service, I used BehaviorSubject for dynamic updation of value.
https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdata.service.ts,src%2Fapp%2Fhello.component.ts
I am new to Angular nativescript, I created a service using the "ng generate service" command in my native angular application, but when importing the service I get the error that the module cannot be found
app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule, NativeScriptHttpClientModule } from "#nativescript/angular";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { LoginComponent } from './components/login/login.component';
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptHttpClientModule
],
declarations: [
AppComponent,
LoginComponent,
],
providers: [],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
ApiBackRequestService.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from '../environments/environment';
#Injectable({
providedIn: 'root'
})
export class ApiBackRequestService {
constructor(
private http: HttpClient) {
}
}
Login.component.ts
import { Component, OnInit } from '#angular/core';
import { ApiBackRequestService } from 'src/app/services/api-back-request.service';
#Component({
selector: 'ns-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
pokemon = [];
constructor(private api: ApiBackRequestService) { }
ngOnInit(): void {
}
}
Thanks
Is it a code-sharing project? in the Login.component.ts file just add # before the src.
change
import { ApiBackRequestService } from 'src/app/services/api-back-request.service';
to
import { ApiBackRequestService } from '#src/app/services/api-back-request.service';
this solved my problem
import { ApiBackRequestService } from '../../services/api-back-request.service';
I am looking at learning Angular 8 with the Angular CLI.
I have added two new components to a core module which i have then imported to the app module.
When I try to render the components in my app html the 'not known element' error is thrown in the console.
I am unsure as to why?
Here is my app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { NoopAnimationsModule } from "#angular/platform-browser/animations";
import { CoreModule } from "./core/core.module";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NoopAnimationsModule, CoreModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
My core.module.ts
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { InputComponent } from "../input/input.component";
import { GraphComponent } from "../graph/graph.component";
#NgModule({
declarations: [InputComponent, GraphComponent],
imports: [CommonModule],
exports: [InputComponent, GraphComponent]
})
export class CoreModule {}
app.component.html
<div>
<InputComponent></InputComponent>
<GraphComponent></GraphComponent>
</div>
And an example of one of the custom components:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
I just realised that I am not referring to the components with the correct selectors!
I should be using: app-input & app-graph in the app.component.html.
I started angular two days ago, i m trying to create a service that will do a get request over my spring boot rest end point and I wish to display the result in my angular app
Here is what i have tried till now
My Service:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { ITweet } from './itweet';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class ReactiveTwitterService {
constructor(private http_client: HttpClient, private tweetTag: string) { }
spring_webflux_service_url = 'http://localhost:8081/search';
myTweets: Observable<ITweet[]>;
setTweetTag(tag) {
this.tweetTag = tag;
}
seearchTweets() {
this.myTweets = this.http_client.get<ITweet[]>(this.spring_webflux_service_url + '/' + this.tweetTag);
}
getTweets() {
return this.myTweets;
}
}
As you see I m waiting for tweets as a response so here is My tweet Interface
export interface ITweet {
id: {
text: string,
name: string
};
tag: string;
}
My app module is looking like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {HttpClientModule} from '#angular/common/http';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SerachBarComponent } from './serach-bar/serach-bar.component';
import { SearchReasultComponent } from './search-reasult/search-reasult.component';
import { HeaderComponent } from './header/header.component';
import { ResultItemComponent } from './result-item/result-item.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
SerachBarComponent,
SearchReasultComponent,
ResultItemComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I googled that there is no need for setting my service in providers thanks to providedIn directive in the service implementation
The components where i use this service
import { Component, HostListener } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
innerWidth: number;
styleClass = {
wide_screen: 'w3-light-grey',
break_point: 'w3-dark-grey'
};
#HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
}
getStyle() {
return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
}
}
AND
import { Component, OnInit, HostListener } from '#angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';
#Component({
selector: 'app-serach-bar',
templateUrl: './serach-bar.component.html',
styleUrls: ['./serach-bar.component.css']
})
export class SerachBarComponent implements OnInit {
innerWidth: number;
constructor(private twiterService: ReactiveTwitterService) { }
placeholder = 'search';
styleClass = {
wide_screen: 'w3-input w3-light-grey',
break_point: 'w3-input w3-white'
};
doSearch(tag) {
this.twiterService.setTweetTag(tag);
this.twiterService.seearchTweets();
}
ngOnInit() {
}
#HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
}
getStyle() {
return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
}
}
AND
import { Component, OnInit, HostListener } from '#angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';
import { ITweet } from '../itweet';
#Component({
selector: 'app-search-reasult',
templateUrl: './search-reasult.component.html',
styleUrls: ['./search-reasult.component.css']
})
export class SearchReasultComponent implements OnInit {
search_result: ITweet[];
innerWidth: number;
constructor(private _twitterService: ReactiveTwitterService) { }
styleClass = {
wide_screen: 'w3-ul w3-hoverable',
break_point: 'w3-green w3-container'
};
ngOnInit() {
this._twitterService.getTweets().subscribe(tweet => this.search_result = tweet);
}
is_search_result_empty() {
return this.search_result === [];
}
set_search_result_empty() {
this.search_result = [];
}
#HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
}
get_list_style() {
return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
}
}
My templates are
AppComponent
<div class="{{getStyle()}}" style="width: 100%;height: 100%;">
<app-header></app-header>
<app-serach-bar></app-serach-bar>
<app-search-reasult></app-search-reasult>
</div>
SearchBar
<div class="w3-container w3-margin-top">
<input class="{{getStyle()}}" type="text" placeholder="{{placeholder}}" (onclick.enter)="doSearch(searchinput.value)" #searchinput>
</div>
Search Result
<div class="w3-container" *ngIf="!is_search_result_empty">
<ul class="{{get_list_style()}}">
<app-result-item *ngFor="let current_item of search_result; trackBy:current_item.id" [item]="current_item"></app-result-item>
</ul>
</div>
the console log an exception and everything is blank
What should i do to fix this ??
you need to add the service to the providers in the module of course remember to import the service
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
SerachBarComponent,
SearchReasultComponent,
ResultItemComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [
ReactiveTwitterService
],
bootstrap: [AppComponent]
})
in your code constructor(private _twitterService: ReactiveTwitterService) { } there is no way to initialize the private tweetTag: string therefore it still fail, and the #Injectable({ providedIn: 'root' }) does not act the same as providers: [ReactiveTwitterService]
Your service should be made available to your component or the module as a provider.
You can add it to providers: array at appmodule or to the individual module and inject it in component for use.
this is my app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
// import { CountryDetailsComponent} from './country-detail.component';
// import { LandingPageComponent} from './landing-page.component';
import { routing } from './app.routing'
import { TypeaheadModule } from 'ng2-bootstrap/components/typeahead';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { TabsModule } from 'ng2-bootstrap/ng2-bootstrap';
import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
#NgModule({
imports: [ BrowserModule, HttpModule, routing, FormsModule, ReactiveFormsModule, TypeaheadModule, TabsModule, CollapseModule, AlertModule],
declarations: [ AppComponent ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I have this angular2 components:
import {ErrorMessagesComponent} from '../error-messages.component';
import {ValidationComponent} from '../validation.component';
import {GasType} from "../gas-type";
export class CountryDetailsComponent extends LoadingPage implements OnInit {
countryName: string;
productionForm: FormGroup;
..
}
and
import { Component, Input } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
import { ValidationComponent } from './validation.component';
#Component({
selector: 'error-messages',
template: `<div style="color:#E82C0C; margin: 6px 0;" *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ErrorMessagesComponent {
#Input() control: FormControl;
constructor() { }
and template country-details.component.html:
<div class="col-lg-10 ">
<input class="price-format form-control" type="text"
[formControl]="productionForm.controls.priceFormat"
[(ngModel)]="productionConfig.priceFormat"
id="inputPriceFormat"
name="priceFormat">
<error-messages [control]="productionForm.controls.priceFormat"></error-messages>
</div>
but i get this error:
Can't bind to 'control' since it isn't a known property of 'error-messages'.
1. If 'error-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'error-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message.
("nputPriceFormat"
name="priceFormat">
<error-messages [ERROR ->][control]="productionForm.controls.priceFormat"></error-messages>
</div>
"): b#43:36
how should i fix this?
The component needs to be registered with an #NgModule()
declarations: [ AppComponent, ErrorMessageComponent ],