The pipe 'reverse' could not be found - html

My data is arranged in ascending order... and i want it in descending order. I am using angular4.
For this i am using a reverse pipe. The code for the same is as below. The first time i used it...it worked ..but later from second time onwards it has started giving error as --> The pipe 'reverse' could not be found.
This is were i referred the code from -
Invert Angular 2 *ngFor
transaction.component.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class TransactionComponent implements OnInit ,PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
transaction.component.html
<tr *ngFor="let dat of result |reverse | filter:filterdata|
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">

The below code declares a pipe.
reverse.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class ReversePipe implements PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
In order to use it in your app.You need to import the pipe and add it to the declarations in your module like below.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { ReversePipe } from '../path/to/yourpipe'
#NgModule({
declarations: [
AppComponent,
ReversePipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Working demo on Stackblitz
Hope this helps :)

Add your pipe to declarations array in your module.
#NgModule({
declarations: [
// import and add your pipe to this.
],
imports: [
],
providers: [],
bootstrap: []
})
export class AppModule { }

Related

Why does the function run twice in my every component

I have this problem where i made three different components with routing. The problem is when i open my different components they loop twice at the moment i open them. What is causing this and how can i get rid of it?
Heres one example component which console.log runs twice when i open it.
import { Component, OnInit } from '#angular/core';
import nameData from '../../names/names.json'
interface INames {
name: string,
amount: number
}
const { names } = nameData
#Component({
selector: 'app-four',
templateUrl: './four.html',
styleUrls: ["./four.css"]
})
export class FourComponent {
nameArray: Array<INames> = names
constructor() {
}
hasName(nameParam: any) {
console.log("miksi tämä tulee kaksi kertaa")
return this.nameArray.some(elem => elem.name === nameParam)
}
}
And here is the app.module.ts and app-routing.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 { OneComponent } from './requirements/one/one';
import { TwoComponent } from './requirements/two/two';
import { ThreeComponent } from './requirements/three/three';
import { FourComponent } from './requirements/four/four';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header';
#NgModule({
declarations: [
AppComponent,
OneComponent,
TwoComponent,
ThreeComponent,
FourComponent,
HeaderComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing-module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home';
import { FourComponent } from './requirements/four/four';
import { OneComponent } from './requirements/one/one';
import { ThreeComponent } from './requirements/three/three';
import { TwoComponent } from './requirements/two/two';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'one', component: OneComponent },
{ path: 'two', component: TwoComponent },
{ path: 'three', component: ThreeComponent },
{ path: 'four', component: FourComponent }
]
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I'm really confused why it loops the function as soon as i press the components button?
I do not recommand at all to use function in the HTML template, because they will be called everytime the Angular's change detection runs. Angular isn't able to tell if the result of the function will be different after each modification, si Angular will call the function everytime something change in the UI.
You must store the result of the function in a variable. Angular can check that the reference of the variable hasn't change.
You can read more information about it on this medium.
I recommend that you do the following
public fullName: string;
constructor() {
this.updateName();
}
private updateName(nameParam: any) {
console.log("miksi tämä tulee kaksi kertaa");
this.fullName = this.nameArray.some(elem => elem.name === nameParam);
}
{{ fullName }}

Uncaught Error: Template parse errors: ej2-datepicker angular 6

trying to implement ej2-calender in my project but faced below error..
The same code is working with demo project.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { DateRangePickerModule } from '#syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
import { ComponentNameComponent } from './component-name/component-name.component';
#NgModule({
declarations: [
AppComponent,
ComponentNameComponent
],
imports: [
BrowserModule,
DateRangePickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
datepicker.html
<div class="form-group daterange-group">
<ejs-daterangepicker id='daterangepicker' placeholder='Select a range' [startDate]='start' [endDate]='end'></ejs-daterangepicker>
datepicker.ts
public start: Date = new Date ("10/07/2017");
public end: Date = new Date ("11/25/2017");
</div>
Uncaught Error: Template parse errors:
Can't bind to 'startDate' since it isn't a known property of 'ejs-daterangepicker'.
If 'ejs-daterangepicker' is an Angular component and it has 'startDate' input, then verify that it is part of this module.
If 'ejs-daterangepicker' 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. (" col-md-3 col-sm-4">)
you need to import the component module (i guess it is DateRangePickerModule) in the app.module.ts.
component docs
Try this example in stackblitz
In html <ejs-daterangepicker [startDate]='start' [endDate]='end'></ejs-daterangepicker>
app.module.ts
import { DropDownListModule } from '#syncfusion/ej2-angular-dropdowns';
import { DateRangePickerModule } from '#syncfusion/ej2-angular-calendars';
import { HttpModule } from '#angular/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from '../app.component';
#NgModule({ declarations: [ AppComponent ], imports: [ DateRangePickerModule, DropDownListModule, BrowserModule, FormsModule, ReactiveFormsModule], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

Angular 6 component not showing up

I just started learning Angular yesterday so I apologize if I'm missing something obvious, but I am trying to display a component on the app.component.html, however, it is not showing up.
TS file for the component I am trying to display:
import { Component, OnInit } from '#angular/core';
import { ImageService } from '../shared/image.service';
#Component({
selector: 'image-list',
templateUrl: './image-list.component.html',
styleUrls: ['./image-list.component.css']
})
export class ImageListComponent implements OnInit {
images: any[];
constructor(private _imageService : ImageService ) { }
searchImages(query : string)
{
return this._imageService.getImage(query).subscribe
(
data => console.log(data),
error => console.log(error),
() => console.log("Request Completed!")
);
}
ngOnInit() {
}
}
image-list.component.html :
<button>Find Images</button>
app.component.html :
<image-list></image-list>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
image.service.ts
import { Injectable } from "#angular/core";
import { environment } from "../../environments/environment";
import { Http, Headers } from "#angular/http";
import { map, filter, scan } from 'rxjs/operators';
#Injectable()
export class ImageService
{
private query: string;
private API_KEY: string = environment.API_KEY;
private API_URL: string = environment.API_URL;
private URL: string = this.API_URL + this.API_KEY + '&q=';
constructor(private _http: Http) {
}
getImage(query)
{
return this._http.get(this.URL + this.query).pipe(
map((res) => res.json));
}
}
I had a similar problem trying to use a component outside its module.
In this case, you have to export a component from your .module.ts:
#NgModule({
// …
declarations: [ MyComponent ],
exports: [ MyComponent ],
// …
})
You need to import your Component and your Service into your app.module.ts and then to declarations and to providers property
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list.component';
import { ImageService } from './image.service';
#NgModule({
declarations: [
AppComponent,
ImageListComponent
],
imports: [
BrowserModule
],
providers: [ ImageService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Adjust ImageListComponent path into the import statement.
Teorically when you generate a component with Angular CLI with a command like this:
ng generate component image-list
it should update your app.module.ts file for you.
To generate a service use
ng generate service image
check this one
in src/app/app.module.ts
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, HttpClientModule],
bootstrap: [AppComponent],
})
export class AppModule {}
from this link: https://malcoded.com/posts/why-angular-not-works/
You may try the Angular tutorial from: https://angular.io/start . It shows how to render a custom Ansible component on the app.component.html page.
You just need to update the app.module.ts file. Assuming your component is named ImageListComponent:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'; // add this line
import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list/image-list.component'; // add this line
#NgModule({
declarations: [
AppComponent,
ImageListComponent // add this line
],
imports: [
BrowserModule,
// add the following 3 lines
RouterModule.forRoot([
{ path: '', component: ImageListComponent },
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
First try this, without adding any custom services.
It seems you have nothing that triggers the API call on your method searchImages in ImageComponent. Having a click eventListener on the <button>Find Images</button> tag should do the trick. Also register the ImageComponent and ImageService in your app.module.ts file.

Ionic app getting data from url json

I don't know how to do this. I tried few examples from internet. What is the best solution?
import { Component } from '#angular/core';
#Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
}
to do this
Modify src/app/app.module.ts and import
import { HttpModule } from '#angular/http';
And Add to the Imports
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
After that you can use the HTTP Module from angular.
In your Page.ts
import the module and use it like this
import { Http } from '#angular/http';
constructor(public navCtrl: NavController, public http: Http) {
let url = "https://www.reddit.com/r/gifs/new/.json?limit=10";
this.http.get(url).map(res => res.json()).subscribe(data => {
console.log(data);
});
}
Additionally you can convert to returned JSON string to JSON Object
var jsonobject = JSON.parse(data)
And Alternatively you can use the IONIC NATIVE HTTP PLUGIN
Cheers :D
To do this just use the below code, no need to import any module
fetch('https://url.com').then(res => res.json())
.then(json => {
console.log(json)
});

ng2-translate + Webpack for production

I'm trying to use the ng2-translate package with Webpack. In development mode it all works fine.
When i'm starting a build, it doesn't copy the language files to the "dist" directory.
Can anyone give me some advices how to change the output path, I tried to follow up https://github.com/ocombe/ng2-translate instructions but I doesnt provide any working example for webpack in production, and its not very clear how to use TranslateStaticLoader and change 18n/*.json.
If I add this I get an error with the libraries
#NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
deps: [Http]
})
],
bootstrap: [AppComponent]
})
This is my app.module.ts
import {BrowserModule} from "#angular/platform-browser";
import { NgModule } from '#angular/core';
import {HttpModule} from '#angular/http';
import { AppComponent } from './app.component';
import {TranslateModule} from 'ng2-translate';
#NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot()
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
My app.component.ts
import { Component } from '#angular/core';
import {TranslateService} from 'ng2-translate';
import '../../public/css/styles.css';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
param: string = "world";
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
}
My app.component.html
<div>{{ 'HELLO' | translate:{value: param} }}</div>
and my json
{
"HELLO": "hello {{value}}"
}
Thanks for your help.
What errors do you have ? I'm using it in development mode and it's working perfectly.