how to change the font size of Kendo-Grid-Column header in html?
By default it's very big and I tried to add font-size:medium; to the column style but still not working.
I tried [headerStyle] as the following link
I got this error: Can't bind to 'headerStyle' since it isn't a known property of 'kendo-grid'.
This should do it:
<kendo-grid-column
field="ContactName"
title="Contact Name"
[width]="150"
[headerStyle]="{'font-size' : '3rem'}"
>
Stackblitz:
https://angular-aprxae.stackblitz.io
Be sure to import the GridModule in app.component:
import { GridModule } from '#progress/kendo-angular-grid';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, GridModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
Related
this is the html code i wrote
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
styles.css
#import "~#angular/material/prebuilt-themes/deeppurple-amber.css";
app.module.ts code
note : i didnt show all the imports i wrote
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatDatepickerModule} from '#angular/material/datepicker'
import {MatInputModule} from '#angular/material/input'
import {MatFormFieldModule} from '#angular/material/form-field'
import { MatNativeDateModule } from '#angular/material/core';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
HeaderComponent,
FooterComponent,
LogoutComponent,
ActualteComponent,
ForumComponent,
AgendaComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
MatNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this is the output
i used the code from the official angular material website and its like
this
I too had some issues when using the mat-date picker component from angular here's what i did
I used the same html code you posted
Added Angular material using ng add #angular/material
I had to import some more modules other than the date picker module as i encountered some errors. Here's my app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import {MatNativeDateModule} from '#angular/material/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserAnimationsModule,
MatNativeDateModule,
BrowserModule,
CommonModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
],
exports: [
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I restarted the app and ran it and it worked fine for me.
I didn't have to do the import for the deep purple theme as it showed the option to select one when adding the angular material.
My Angular version is Angular: 15.1.5 and the material version is "#angular/material": "^15.1.5",
I used in app.component.html :
<mat-toolbar>
Responsive side navigation
</mat-toolbar>
and I define MatToolbarModule in app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatToolbarModule } from '#angular/material/toolbar';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatSidenavModule,
MatButtonModule,
MatIconModule,
MatDividerModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I obtain this error when I execute ng build command:
Error: src/app/app.component.html:1:1 - error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
please, how to correct this error
Based on what you shared (before any update) your set up is sufficient to make it working. In case you are on VSCode closing and opening the IDE would be sufficient sometimes to get ride of this kind of compilation errors.
Here is a stackblitz compatible with your code above works fine.
Somehow i get the Error 'Can't bind to 'ngModel' since it isn't a known property of 'input''.
Even doe the FormsModule is importet.
html (login.component.html):
<input type="text" [(ngModel)] = "username">
<button (click)="login()">LOGIN DO</button>
app.module.ts:
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
ButtonsComponent,
ButtonPipe
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
FeatureEagerModule,
CoreModule,
HttpClientModule,
LoginComponent
],
providers: [LoginComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Just to get sure i have also importat the FormsModule in the login.module.ts but even that cannot solve the error.
LoginComponent must be in declarations, don't providers
declarations: [
AppComponent,
ButtonsComponent,
ButtonPipe,
LoginComponent
],
Do you have your input inside a form? try this:
<input type="text" [(ngModel)] = "username" name="username">
You always have to put the attribute name with ngModel when it is inside a < form >
I have integrated ProseMirror in my Angular 6 as a text editor using Directives as below:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injector } from '#angular/core';
import { ProsemirrorModule } from './prosemirror/prosemirror.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatInputModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
MyElementComponent
],
imports: [
BrowserModule,
ProsemirrorModule,
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatInputModule
],
providers: [],
})
export class AppModule {
}
ngDoBootstrap() {
}
}
and used html as:
<div appEditor></div>
all are working well...but toolbar does not appear properly...all aligned one below other
No idea how to make it to appear properly. Any help please
I have this scenario: there are three modules, header.module, _shared.module and app.module.
header.module imports and exports the header component. _shared.module acts as a wrapper module and imports the header.module. app.module finally imports the _shared.module.
Finally i am using the header through it's selector eg <dir-header> in app.component.html. I have even included CUSTOM_ELEMENTS_SCHEMA in app.module to suppress any error that may arise. But i'm no longer able to see the header, although the tag <dir-header></dir-header> is there in DOM, but it's content <div class="..." >...</div> is not.
header.module :-
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HeaderComponent } from './header.component';
import { HeaderRoutingModule } from './header-routing.module';
#NgModule({
declarations: [
HeaderComponent
],
imports: [HeaderRoutingModule, ReactiveFormsModule, CommonModule],
exports: [
HeaderComponent
]
})
export class HeaderModule {}
_shared.module :-
import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
HeaderModule,
FooterModule
],
declarations: [],
exports: []
})
export class SharedModule {}
app.module :-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
/*rest of the code*/
#NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
imports:
[...
SharedModule,
...
],
providers: [CrudService, ...],
bootstrap: [AppComponent]
})
export class AppModule { }
EDIT: It is not importing the <header-dir> from header.module rather creating a new custom selector in app.component.html. How do I import the header from header.module ?
[ISSUE SOLVED] first of all, remove the CUSTOM_ELEMENTS_SCHEMA from app.module because it is not really required in THIS case. Next, in _shared.module under the exports section, also export the custom modules you have imported here i.e. header.module and foot.module :-
_shared.module
import { NgModule} from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
HeaderModule,
FooterModule
],
declarations: [],
exports: [HeaderModule,
FooterModule]
})
export class SharedModule {}