<mat-form-field>
<mat-select placeholder="Toppings" multiple>
<mat-option></mat-option>
</mat-select>
</mat-form-field>
I am using mat select multi select dropdown . I have imported
import {MatButtonModule, MatCheckboxModule, MatSelect} from '#angular/material';
import {MatFormFieldControl} from '#angular/material/';
But I am facing this error and unable to proceed.
To use the CdkOverlayOrigin directive, you will need to import its module into your application:
import { OverlayModule } from '#angular/cdk/overlay';
...
#NgModule({
imports: [
OverlayModule,
...
],
...
})
export class AppModule { }
Related
I have installed angular material and then imported into my app-module
Now I want to use a selector of employees so I have this template in my component
<mat-form-field appearance="fill">
<mat-label>Empleado</mat-label>
<mat-select [(value)]="empleadoSeleccionado">
<mat-option [value]="empleado.empleadoID" *ngFor="let empleado of listaEmpleados">{{empleado.nombre}}</mat-option>
</mat-select>
In material module I have imported MatSelectModule and MatFormFielModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MatSelectModule } from '#angular/material/select';
import { MatFormFieldModule } from '#angular/material/form-field';
#NgModule({
declarations: [],
imports: [
CommonModule,
MatSelectModule,
MatFormFieldModule,
]
})
export class MaterialModule { }
But I get always this same error NG8001: 'mat-form-field' is not a known element:
Any idea, please?
Thanks
The error was in Material Module where I need export the array not import
Thanks
I'm new to Angular2 and have many questions.
I have some controllers that I wrote in AngularJS that I now want to convert to Angular2 components.
I would like to pass JSON data to the component and use in the template. In AngularJS I used ng-init to do this.
I have tried initialising the component in the ASP.NET MVC view with:
<review [reviewJson]="#Newtonsoft.Json.JsonConvert.SerializeObject(Model.CustomerReviews)"></review>
The component looks like this:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'review',
template: `
<div id="reviews-wrapper" class="row">
<div class="item col-sm-4 col-xs-6" *ngFor="let review of reviewJson">
<div class="review-card">
<div class="review-image"><img [src]="review.Image"/></div>
<div class="review-name">review.Name</div>
<div class="review-text">review.Text</div>
</div>
</div>
</div>
`,
providers: []
})
export class ReviewComponent implements OnInit {
#Input() reviewJson: any;
constructor() {
}
ngOnInit() {
console.log(this.reviewJson);
}
}
The app.module file where I declare the review component looks like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { ReviewComponent } from './review.component';
#NgModule({
imports: [
BrowserModule,
HttpModule
],
declarations: [
ReviewComponent
],
bootstrap: [ReviewComponent],
providers: [
]
})
export class AppModule { }
The console.log(this.reviewJson) is showing undefined when I load the page so obviously I'm doing something completely wrong.
Any help appreciated.
You cannot directly bind the MVC models into the angular template - fetch the data as JSON using service and then bind the value to it's #Input decorator
Hope this helps - happy coding :)
I use CoreUI (angular 6 version) in order to create a simple panel.
I need to have a datepicker, but cannot manage to find how to do it.
Angular material might be a nice solution, but I don manage to include it - looks like there are some basic conflicts.
Any simple solution?
you install a date-time-picker package:
npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic
// added the following to app.module.ts
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { NgModule } from '#angular/core';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
DlDateTimePickerDateModule,
],
providers: [FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
//added the following to app.component.html
<dl-date-time-picker
startView="day"
maxView="year"
minView="minute"
minuteStep="5"
[(ngModel)]="selectedDate"
>
</dl-date-time-picker>
// added following to ./src/styles.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~open-iconic/font/css/open-iconic-bootstrap.css';
You can add ngx-bootstrap, it has BootStrap datepicker compatible with Bootstrap V3 & V4.
You can check it here: https://valor-software.com/ngx-bootstrap/#/datepicker
To install ngx-bootstrap, run this command
ng add ngx-bootstrap --component datepicker
Then add the following code to your AppModule
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
#NgModule({
imports: [BsDatepickerModule.forRoot(),...]
})
export class AppModule(){}
Sample usage (at the template):
<input type="text" placeholder="Datepicker" class="form-control" bsDatepicker>
Here im new to Angular Material please help me why im getting Error. I was copied code from https://material.angular.io/components/form-field/examples
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>
This is the same code which i copied from that url
App.module.ts
import {MatFormFieldModule} from '#angular/material/form-field';
import {MatInputModule} from '#angular/material/input';
imports: [
MatFormFieldModule,MatInputModule]
Looks like you forgot about MatSelectModule:
import {MatFormFieldModule} from '#angular/material/form-field';
import {MatInputModule} from '#angular/material/input';
import {MatSelectModule} from '#angular/material/select';
...
imports: [MatFormFieldModule,MatInputModule,MatSelectModule]
Try Removing placeholder="Input" of input box.
It worked for me give it a try.
In case this helps, here is my app.module.ts for my app using material:
import {
MatFormFieldModule,
MatInputModule,
} from '#angular/material';
....
#NgModule({
imports: [
.....,
MatFormFieldModule,
MatInputModule,
.....,
],
.....
})
export class AppModule { }
import {MatInputModule} from '#angular/material';
#NgModule({
imports: [
MatInputModule
],
exports:[
MatInputModule
]
})
at app.module.ts file
Remove placeholder from input tag.
Instead of using placeholder you could use
<mat-label>.....</mat-label>
Here is code:
<mat-form-field appearance="outline">
<input matInput required />
<mat-label>Username</mat-label>
</mat-form-field>
I am doing authentication and authorization of pages on the server side. on index pages of each controller. But inside each index page I want to use angular 2 hence I want to use angular 2 routing.
I have tried like
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:''
})
export class AppComponent {
}
app.module.ts
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '#angular/router'
import { TestSuiteComponent } from './testsuite/testsuite.component'
//import {InputTextModule, CalendarModule, DataTable} from 'primeng/primeng';
import { DataTableModule, SharedModule } from 'primeng/primeng';
#NgModule({
imports: [BrowserModule, DataTableModule, SharedModule, RouterModule.forRoot([
{
path: 'TestSuiteEditor/Index',
component: TestSuiteComponent
},
{
path: 'Home/Index',
component: TestSuiteComponent
}
])],
declarations: [AppComponent,TestSuiteComponent],
bootstrap: [ AppComponent]
})
export class AppModule { }
on testsuite.component.ts page
import { Directive, Component, OnInit } from '#angular/core';
import {DataTableModule, SharedModule} from 'primeng/primeng';
import { TestSuite } from './testsuite';
#Component({
// moduleId: module.id,
selector: 'testsuite-header',
template: `
<div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="float:left;margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" style="float:left" placeholder="Global Filter">
</div>
<div class="ui-datatable ui-widget">
<div class="ui-datatable-tablewrapper">
<p-dataTable [value]="testSuites" [rows]="5" [paginator]="true" [globalFilter]="gb" [editable]="true">
<p-column field="testSuiteId" header="TestSuites (startsWith)" [style]="{'width':'10%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="projectId" header="ProjectId (contains)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="contains" [editable]="true"></p-column>
<p-column field="name" header="Name (startsWith)" [style]="{'width':'30%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="description" header="Description (endsWith)" [style]="{'width':'40%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
<p-column field="isActive" header="IsActive (endsWith)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
</p-dataTable>
</div>
</div> `,
// providers: [TestSuiteService]
})
export class TestSuiteComponent{}
Home/Index.cshtml
<testsuite-header>Loading....</testsuite-header>
but it throwing an error of
Cannot find primary outlet to load 'TestSuiteComponent'
You have forgotten to add router-outlet in your application. You can define router-outlet in AppComponent like this-
<router-outlet></router-outlet>
So your AppComponent will looks like this-
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:`
<!-- Routed views go here -->
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
I have found the solution, thanks for your help
I have created the path similar to my MVC routing and added in routing.ts.
Since angular 2routing have feature of loading the active url so it automatically loads the component which is assign to that URL.