I have AngularJS project which summarize data and visualizes it by number of female and male in months. Now I want to allow user to select a year and view visualization for all months of that particular year.
Currently my graph look like this:
Here is my code so far:
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 { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { ChartsModule } from 'ng2-charts';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ChartsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my full project https://angular-ivy-gewusg.stackblitz.io
Related
<span>{{
value | date: 'E, dd/MM/yyyy':undefined:languageCode
}}</span>
I have a scenario in which I need to pass the locale code corresponding to Cambodia's KHMER language. I tried multiple locale codes but they didn't work as expected.
Could anyone please help me in finding the locale code for the KHMER language of Cambodia?
The above code is working fine for Chinese, English...
You just to register locale data with km provides on #angular/common/locales
example
On your app.module.ts
import { LOCALE_ID, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { registerLocaleData } from '#angular/common';
import km from '#angular/common/locales/km';
registerLocaleData(km);
import { AppComponent } from './app.component';
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [{ provide: LOCALE_ID, useValue: 'km_KH' }],
})
export class AppModule {}
I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.
Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}
I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()
I using Angular Material component and try to use a prebuilt theme
I added this row to my component css #import '#angular/material/prebuilt-themes/deeppurple-amber.css';
But still get an error
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Here is app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
import { MatPaginatorModule, MatCheckboxModule} from '#angular/material';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
PaymentsComponent
],
imports: [
BrowserModule,
CustomMaterialModule,
AppRoutingModule,
MatPaginatorModule,
MatCheckboxModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Where can be my trouble?
Seems like I found answer
I need to add
providers: [
{
provide: MATERIAL_SANITY_CHECKS,
useValue: false
}
],
Into app.module.ts and now I don't have this error
New to Angular, please bear with me. I need to load in tweets from a specific timeline. What is the best way to accomplish this? I've tried using this package (https://www.npmjs.com/package/ng4-twitter-timeline), and have followed the instructions in that documentation, but I still get the error that "ng4-twitter-timeline is not a known element."
I've also tried adding in
<script src="https://platform.twitter.com/widgets.js" async></script>
to index.html...
Are there additional scripts that need to be loaded in for this to work?
app.module.ts
...
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';
#NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
AngularFontAwesomeModule,
SwiperModule,
RouterModule.forRoot(routes),
ShareModule,
MasonryModule,
Ng4TwitterTimelineModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
tweets.component.ts
import { Component, OnInit } from '#angular/core';
import { Ng4TwitterTimelineService } from 'ng4-twitter-timeline/lib/index';
#Component({
selector: 'app-tweets',
templateUrl: './tweets.component.html',
styleUrls: ['./tweets.component.scss']
})
export class TweetsComponent implements OnInit {
constructor(private ng4TwitterTimelineService: Ng4TwitterTimelineService) {}
ngOnInit() {}
}
tweets.component.html
<ng4-twitter-timeline [dataSrc]="{sourceType: 'profile',screenName: 'lokers_one'}" [opts]="{tweetLimit: 2}"></ng4-twitter-timeline>
You should add .forRoot when you imports Ng4TwitterTimelineModule in #ngModule. So your app.module.ts should look like that:
...
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';
#NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
AngularFontAwesomeModule,
SwiperModule,
RouterModule.forRoot(routes),
ShareModule,
MasonryModule,
Ng4TwitterTimelineModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Figured it out, everyone. The account used in the demo has protected tweets... which is why nothing was embedding... I changed the account and it does work. But still don't understand why I'm still getting this error: 'ng4-twitter-timeline' is not a known element'
I am new working with Angular 2 and have a question regarding keeping the code DRY when using multiple modules.
I have a shared module where i import and export common used functionality for other modules.
One of those imports are ng2-translate.
But when I import the SharedModule into a new module, I will need to import and configure the TranslateModule from ng2-translate again, to be able to configure it.
This gives me a pattern i don't like if i should work with multiple modules.
So how would I keep this code DRY and maintain the best practices?
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TranslateModule } from 'ng2-translate';
#NgModule({
imports: [
CommonModule,
TranslateModule
],
exports: [
CommonModule,
TranslateModule
]
})
export class SharedModule {
}
AppModule
import { NgModule } from '#angular/core';
import { HttpModule, Http } from '#angular/http';
import { TranslateModule, TranslateLoader, TranslateStaticLoader, TranslateService } from 'ng2-translate';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
export function translateLoaderFactory(http: Http) {
return new TranslateStaticLoader(http, '../assets/i18n', '.json')
}
#NgModule({
declarations: [
AppComponent
],
imports: [
HttpModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: translateLoaderFactory,
deps: [Http]
}),
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(translateService: TranslateService) {
translateService.setDefaultLang('en-US');
translateService.use('sv-SE');
}
}
This is my basic structure, if I add a new module I will have to import the SharedModule, TranslateModule and setting the default language using the TranslateService all over again.
How do I prevent this pattern?