I am new to angular 2 and what I did is use the angular infinite scroll and load the data when the scroll is scrolled but it prompt some error cannot bind property I illustrated below error :
install angular 2-infinite-scroll
import { NgModule, enableProdMode, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Routes } from '#angular/router';
import { AppComponent } from './app/app.component';
/* Feature Modules */
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { PlanModule } from './plan.module';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
enableProdMode();
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
DatepickerModule.forRoot(),
PlanModule,
InfiniteScrollModule
],
declarations: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
add html page
<div id="activityList" *ngIf="structure.jobplan" infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="300"
(scrolled)="bindActivitiesOnScroll($event)" >
then i got error :
Uncaught Error: Template parse errors:
Can't bind to 'infiniteScrollDistance' since it isn't a known property of 'div'. ("
<div id="activityList" *ngIf="structure.jobplan" infinite-scroll
[ERROR ->][infiniteScrollDistance]="2"
[infiniteScrollThrottle]="300"
(scrolled)="bindAct"): ng:///ActivityModule/ActivityListComponent.html#5:12
Can't bind to 'infiniteScrollThrottle' since it isn't a known property of 'div'. ("t" *ngIf="structure.jobplan" infinite-scroll
[infiniteScrollDistance]="2"
[ERROR ->][infiniteScrollThrottle]="300"
(scrolled)="bindActivitiesOnScroll($event)" >
"): ng:///ActivityModule/ActivityListComponent.html#6:12
at syntaxError (index.ts:26)
at TemplateParser.parse (index.ts:26)
at JitCompiler._compileTemplate (index.ts:26)
at index.ts:26
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (index.ts:26)
at index.ts:26
at Object.then (index.ts:26)
at JitCompiler._compileModuleAndComponents (index.ts:26)
at JitCompiler.compileModuleAsync (index.ts:26)
i googled but cant find a solution why it does not allowing to bind property,
couldn't find where i made mistake please help me
what i did was to import
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
inside my app.module.ts
Related
I am trying to view a story of an Angular Material Button. However, in the story, the button does not have any styles. I imported angular material using : ng add angular/material and these ara my files for my component :
This is the html file :
<button mat-button color="primary">Button Material</button>
This is the module of my lib :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Route } from '#angular/router';
import { ElementComponent } from './element/element.component';
import {MatButtonModule} from '#angular/material/button';
import { MaterialComponent } from './material/material.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
export const plateRoutes: Route[] = [];
#NgModule({
imports: [CommonModule, RouterModule,BrowserAnimationsModule, MatButtonModule],
declarations: [
ElementComponent,
MaterialComponent,
],
})
export class PlateModule {}
This is the component story :
As you can see the style does not apply to the mat button...
In your MaterialComponent you have to import the material module of Button
import { MatButtonModule } from '#angular/material/button';
import { Meta, moduleMetadata, Story } from '#storybook/angular';
import { ButtonComponent } from './button.component';
export default {
title: 'button',
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [MatButtonModule],
}),
],
} as Meta<ButtonComponent>;
And after this you will need to add the style in the build step of the storybook
{
...
"build-storybook": {
...
"options": {
"styles": [
// the style that you should import
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
]
},
}
...
}
Angular app is running fine with ng serve,but error shown when run with ng serve --prod
ERROR in : Invalid provider for the NgModule 'ɵngrx_modules_effects_effects_b in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts' - only instances of Provider and Type are allowed, got: [ɵngrx_modules_effects_effects_f in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, EffectSources in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, Actions in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, ?null?, ...]
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {DatePipe} from '#angular/common';
.
.
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { environment } from 'src/environments/environment';
import { appReducer } from './state-management/app.reducer';
import AppEffects from './state-management/app.effects';
import { PdfViewerModule } from 'ng2-pdf-viewer';
.
.
import { PdfReaderComponent } from './shared/components/pdf-reader/pdf-
reader.component';
import { AsyncPipe } from '../../node_modules/#angular/common';
#NgModule({
declarations: [
AppComponent,
.
.
],
imports: [
AngularFireDatabaseModule,
.
.
Ng5SliderModule,
StoreModule.forRoot(appReducer),
EffectsModule.forRoot(AppEffects),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production // Restrict extension to log-only mode
})
],
providers: [ApiService,DatePipe,MessagingService, AsyncPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
I've just started using Angular 2 with Rails 5.1.
When i try to import the angular-drag-and-drop-list in my CategoriesModule, i get an error in my rails application:
Uncaught ReferenceError: angular is not defined
The drag-and-drop file is loaded, and this error is trickered from the bottom of it:
...
})(angular.module('dndLists', []));
What am i doing wrong? I've installed the package with npm and now it's added in my package.json as:
"angular-drag-and-drop-lists": "^2.1.0",
Here is my module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Http, HttpModule } from '#angular/http';
import { CategoriesIndexComponent } from './categories_index.component';
import { dndLists } from 'angular-drag-and-drop-lists';
#NgModule({
declarations: [
CategoriesIndexComponent
],
imports: [
dndLists,
BrowserModule,
HttpModule
],
providers: [],
bootstrap: [ CategoriesIndexComponent ]
})
export class CategoriesIndexModule{ }
So Angular is not being loadet before the file?
How can this happen?
I would appreciate any help.
i'm working in an ASP.NET Core Web Application, using Angular 2 and VS 2015 as IDE. This is totally new for me, so i've been following every tutorial to get this page work. When i finally put everything together i face a routing problem: The page stays in the loading... tag and never show the content in the ModuleViewComponent. Read a lot of stackoverflow questions but I could not fix it.
My main.ts file looks like this:
// main entry point
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
the app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import { NgForm } from '#angular/forms';
import { AppComponent } from './app.component';
import { ModuleViewComponent } from './components/CommonComponents/moduleView.component/moduleView.component';
const myRoutes: Routes = [
{
path: 'home',
component: ModuleViewComponent
},
{
path: '/',
redirectTo: 'home',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forRoot(myRoutes),
BrowserModule,
FormsModule,
HttpModule
],
declarations: [
AppComponent,
NavbarComponent,
ModuleViewComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:'<router-outlet></router-outlet>'
})
export class AppComponent {
}
And the index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<my-app>loading...</my-app>
How can i get this to work and show the component content? Any help is more than welcome, thanks in advance.
I have created a sample application which explains step by step details to create angular (Angular v4) applications with Asp.net MVC framework. Below is the link. Hope this helps you. You have to update route config file in your project so that angular can receive requests.
http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/
http://hive.rinoy.in/routing-in-angular-asp-net-mvc-application/
I am working on a ASP.NET MVC application that has several views that are serviced by a single Controller. The path of one of them is 'home/settings' and looks like this
With Angular2, I created a UserProfileComponent that basically renders a table containing list of the existing users and I would like it to render below User Profiles in the screenshot above:
user-profiles.component.ts
import { Component, Input } from '#angular/core';
import { UserService } from "../../services/userService";
#Component({
selector: 'user-profiles',
providers: [UserService],
template: `
...
`
})
export class UserProfilesComponent {
constructor(userService: UserService) {
userService.getUsers()
.subscribe(
users => this.users = users,
error => console.error('Error: ' + error),
() => console.log('Completedsfsdf!')
);
}
users = [];
}
Using Routing, I managed to render the UserProfileComponent when the settings view is rendered, but it only renders inside the tag inside the AppComponent template and I would like it to render inside my selector inside the settings view. It is also worth noting that the AppComponent is currently rendering inside the _Layout
app.ts
import { Component } from '#angular/core';
import { UserService } from './services/userService';
#Component({
selector: 'my-app',
providers: [UserService],
template: `
<p>Angular 2 is running...</p>
<!-- Routed views go here -->
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
Which causes the table to render only at a layout level (on top of the page) instead on the inside the settings view.
boot.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app';
import { UserProfilesComponent } from './components/settings/user- profiles.component';
import { HomeComponent } from './components/home/home.component';
import { HttpModule } from '#angular/http';
import {UserService} from './services/userService'
import {APP_BASE_HREF} from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
const appRoutes: Routes = [
{
path: 'home/settings',
component: UserProfilesComponent
},
{ path: '', component: HomeComponent }
];
#NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(appRoutes)],
declarations: [AppComponent, HomeComponent, UserProfilesComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
My initial approach here is have each section within the settings view to have its own component, so ideally RecordRollover will have its own component and so on. Is this possible?