The picture above is the only display when I added Angular Calendar. Does it have conflict with Font Awesome? Because I installed Font Awesome in my Angular project with Angular Material as its main styling and component framework.
HTML:
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events">
</mwl-calendar-month-view>
TS:
import { Component } from '#angular/core';
import { CalendarEvent, CalendarUtils } from 'angular-calendar';
#Component({
selector: 'app-creator-profile-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
})
export class CalendarComponent {
viewDate: Date = new Date();
events: CalendarEvent[] = [];
}
Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CalendarComponent } from './components/calendar/calendar.component';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import * as moment from 'moment';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
export function momentAdapterFactory() {
return adapterFactory(moment);
};
#NgModule({
declarations: [
CalendarComponent
],
imports: [
CommonModule,
CalendarModule.forRoot({ provide: DateAdapter, useFactory: momentAdapterFactory })
],
})
export class CreatorProfileModule { }
Oh okay. I forgot to add "./node_modules/angular-calendar/css/angular-calendar.css" in angular.json
That solved this problem when you manually install.
Add in your component encapsulation: ViewEncapsulation.None
. it will work
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"
]
},
}
...
}
I have the following code based on the angular material documentation:
In my HTML
<button mat-raised-button (click)="openBottomSheet()">Abrir BottomSheet</button>
and, in my page ts archive :
import { Component, OnInit } from '#angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '#angular/material/bottom-sheet';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(private bottomSheet: MatBottomSheet) {}
openBottomSheet ()
{
this.bottomSheet.open(BottomSheetOverviewExampleSheet)
}
ngOnInit() {
}
}
#Component({
selector: 'bottom-sheet-overview-example-sheet',
templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
openLink(event: MouseEvent): void {
this.bottomSheetRef.dismiss();
event.preventDefault();
}
}
The problem is that when trying to show the bottomsheet I get the following error:
ERROR TypeError: this.bottomSheet.open is not a function
at LoginPage.openBottomSheet
In my page component i have :
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';
import { MaterialModule } from '../material.module';
import {MatBottomSheetModule} from '#angular/material/bottom-sheet'
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LoginPageRoutingModule,
MaterialModule,
MatBottomSheetModule
],
declarations: [LoginPage]
})
export class LoginPageModule {}
The material Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {
MatTableModule,
MatStepperModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatOptionModule,
MatSelectModule,
MatIconModule,
MatPaginatorModule,
MatSortModule
} from "#angular/material";
import { MatCheckboxModule } from '#angular/material/checkbox';
import {MatBottomSheetRef, MatBottomSheet} from '#angular/material/bottom-sheet';
#NgModule({
declarations: [],
providers: [
{ provide: MatBottomSheetRef, useValue: {} },
{ provide: MatBottomSheet, useValue: {} },
],
imports: [
CommonModule,
],
exports: [
MatTableModule,
MatStepperModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatOptionModule,
MatSelectModule,
MatPaginatorModule,
MatSortModule,
MatCheckboxModule
]
})
export class MaterialModule { }
You must import the material design module that holds this function.
Make sure you have import {MatBottomSheetModule} from '#angular/material/bottom-sheet';
imported in your component module or app module.
Update:
Instead of
import {
MatTableModule,
MatStepperModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatOptionModule,
MatSelectModule,
MatIconModule,
MatPaginatorModule,
MatSortModule
} from "#angular/material";
try this,
import {MatBottomSheetRef, MatBottomSheet, MatBottomSheetModule} from '#angular/material/bottom-sheet';
import {MatCheckboxModule} from "#angular/material/checkbox";
import {MatFormFieldModule} from "#angular/material/form-field";
import {MatOptionModule} from "#angular/material/core";
import {MatSortModule} from "#angular/material/sort";
import {MatTableModule} from "#angular/material/table";
import {MatSelectModule} from "#angular/material/select";
import {MatIconModule} from "#angular/material/icon";
import {MatPaginatorModule} from "#angular/material/paginator";
import {MatStepperModule} from "#angular/material/stepper";
import {MatInputModule} from "#angular/material/input";
import {MatButtonModule} from "#angular/material/button";
in MaterialModule
Make sure you have following things.
1). in your login-page.module.ts file, "BottomSheetOverviewExampleSheet" in declarations and entryComponents
like this,
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage, BottomSheetOverviewExampleSheet } from './login.page';
import { MaterialModule } from '../material.module';
import { MatBottomSheetModule } from '#angular/material/bottom-sheet';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LoginPageRoutingModule,
MaterialModule,
MatBottomSheetModule
],
declarations: [LoginPage, BottomSheetOverviewExampleSheet],
entryComponents: [BottomSheetOverviewExampleSheet],
})
export class LoginPageModule {}
2). hope you have bottom-sheet-overview-example-sheet.html
like this,
<mat-nav-list>
<a mat-list-item (click)="openLink($event)">
<span mat-line>
<!--Your message To Show -->
Test Message
</span>
</a>
</mat-nav-list>
I have followed this tutorial, and am having trouble getting it going.
I am using Angular 4.2.4.
[Error] ERROR
Error: No provider for Http!
injectionError — core.es5.js:1169
...
View_AppComponent_Host_0 (AppComponent_Host.ngfactory.js:4)
...
As I understand it, a few things have changed with Angular since this tutorial was written, including the replacement of this:
import { Http } from '#angular/http';
with this:
import { HttpModule } from '#angular/http';
I have tried this and added HttpModule to the imports array in `app.module.ts.
app.component.ts
import { Component } from '#angular/core';
import { HttpModule } from '#angular/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
books;
constructor(private http: Http) {
http.get('http://localhost:3000/books.json')
.subscribe(res => this.books = res.json());
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Any suggestions would be much appreciated.
Thanks!
You should import the Http provider from #angular/http inside your AppComponent, and add the HttpModule to the imports array of your AppModule:
AppComponent
import { Component } from '#angular/core';
import { Http } from '#angular/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
books;
constructor(private http: Http) {
http.get('http://localhost:3000/books.json')
.subscribe(res => this.books = res.json());
}
}
AppModule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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?