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
Related
I am using the Angular implementation of the IBM Carbon Design and IBM icons are not showing in some contexts.
What i'm supposed to get :
What i get :
Icons which appear in my header :
Here is my Angular config :
Here are the files where icons appear (header) :
app.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// IBM Carbon Modules
import Notification20Icon from '#carbon/icons/es/notification/20';
import Switcher20Icon from '#carbon/icons/es/switcher/20';
import UserAvatar20Icon from '#carbon/icons/es/user--avatar/20';
import {
BreadcrumbModule, ButtonModule, GridModule,
IconModule, IconService, ListModule, TableModule,
TabsModule, TilesModule, UIShellModule
} from 'carbon-components-angular';
// App Modules
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './Components/header/header.component';
import { LandingComponent } from './Components/landing/landing.component';
import { ReposComponent } from './Components/repos/repos.component';
import { InfoModule } from './module/info/info.module';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LandingComponent,
ReposComponent,
],
imports: [
BrowserModule,
ButtonModule,
AppRoutingModule,
CommonModule,
GridModule,
ListModule,
TabsModule,
TilesModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule,
UIShellModule,
IconModule,
BreadcrumbModule,
TableModule,
InfoModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(protected iconService: IconService) {
iconService.registerAll([
Notification20Icon,
UserAvatar20Icon,
Switcher20Icon,
]);
}
}
header.component.html
<ibm-header name="[PW - Raceway]">
<ibm-header-navigation>
<ibm-header-item routerLink="landing">Landing</ibm-header-item>
<ibm-header-item routerLink="repos">Repositories</ibm-header-item>
<ibm-header-item routerLink="support">Support</ibm-header-item>
<ibm-header-menu title="Manage">
<ibm-header-item routerLink="link1">Link 1</ibm-header-item>
<ibm-header-item>Link 2</ibm-header-item>
<ibm-header-item>Link 3</ibm-header-item>
</ibm-header-menu>
</ibm-header-navigation>
<ibm-header-global>
<ibm-header-action title="action">
<svg ibmIcon="notification" size="20"></svg>
</ibm-header-action>
<ibm-header-action title="action">
<svg ibmIcon="user--avatar" size="20"></svg>
</ibm-header-action>
<ibm-header-action title="action">
<svg ibmIcon="switcher" size="20"></svg>
</ibm-header-action>
</ibm-header-global>
</ibm-header>
Here are the files where icons don't appear (kind of footer) :
info.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
// IBM Carbon Modules
import Application32Icon from '#carbon/icons/es/application/32';
import Globe32Icon from '#carbon/icons/es/globe/32';
import PersonFavorite32Icon from '#carbon/icons/es/person--favorite/32';
import { GridModule, IconService } from 'carbon-components-angular';
// App Modules
import { CardComponent } from './card/card.component';
import { SectionComponent } from './section/section.component';
#NgModule({
declarations: [
CardComponent,
SectionComponent
],
imports: [
CommonModule,
GridModule,
],
providers: [],
exports: [
SectionComponent,
CardComponent
]
})
export class InfoModule {
constructor(protected iconService: IconService) {
iconService.registerAll([
Application32Icon,
Globe32Icon,
PersonFavorite32Icon,
]);
}
}
section.component.html
<section ibmRow class="info-section info-section__r1">
<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
<h3 class="info-section__heading">{{heading}}</h3>
</div>
<app-card
ibmCol
[columnNumbers]="{'md': 4, 'lg': 4}"
[heading]="items[0].heading"
[content]="items[0].content"
>
<svg ibmIcon="person--favorite" size="32"></svg>
</app-card>
<app-card
ibmCol
[columnNumbers]="{'md': 4, 'lg': 4}"
[heading]="items[1].heading"
[content]="items[1].content"
>
<svg ibmIcon="application" size="32"></svg>
</app-card>
<app-card
ibmCol
[columnNumbers]="{'md': 4, 'lg': 4}"
[heading]="items[2].heading"
[content]="items[2].content"
>
<svg ibmIcon="globe" size="32"></svg>
</app-card>
</section>
card.component.html
<div class="info-card">
<h4 class="info-card__heading">
{{splitHeading[0]}}
<strong>{{splitHeading[1]}}</strong>
</h4>
<div class="info-card__body">{{content}}</div>
<div class="info-card__icon">
<ng-content></ng-content>
</div>
</div>
How can i solve that ? I don't get any error be it in VS Code or in the browser.
The problem was that I wasn't importing the IconModule in my info.module.ts so obviously it couldn't load the icons.
The corrected file :
info.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
// IBM Carbon Modules
import Application32Icon from '#carbon/icons/es/application/32';
import Globe32Icon from '#carbon/icons/es/globe/32';
import PersonFavorite32Icon from '#carbon/icons/es/person--favorite/32';
import { GridModule, IconModule, IconService } from 'carbon-components-angular';
// App Modules
import { CardComponent } from './card/card.component';
import { SectionComponent } from './section/section.component';
#NgModule({
declarations: [
CardComponent,
SectionComponent
],
imports: [
CommonModule,
GridModule,
IconModule
],
providers: [],
exports: [
SectionComponent,
CardComponent
]
})
export class InfoModule {
constructor(protected iconService: IconService) {
iconService.registerAll([
Application32Icon,
Globe32Icon,
PersonFavorite32Icon,
]);
}
}
I have created component within module and trying to output the result with simple html code in 'app.component.html'
When I hover on the code it shows me this error "BlogpostModule' is declared but its value is never read.ts(6133)"
When I remove the code "". I see the output.
Please help me to fix this blank page.
app.component.html
<div class="container">
<app-header></app-header>
<app-banner></app-banner>
<app-blogpost-featured></app-blogpost-featured>
<app-footer></app-footer>
</div>
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BlogpostModule } from './blogpost/blogpost.module';
import { CmspageModule } from './cmspage/cmspage.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BannerComponent } from './banner/banner.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
BannerComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CmspageModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blogpost.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BlogpostRoutingModule } from './blogpost-routing.module';
import { BlogpostFeaturedComponent } from './blogpost-featured/blogpost-featured.component';
import { BlogpostListComponent } from './blogpost-list/blogpost-list.component';
import { BlogpostDetailComponent } from './blogpost-detail/blogpost-detail.component';
import { BlogpostRecentComponent } from './blogpost-recent/blogpost-recent.component';
import { CategoriesComponent } from './categories/categories.component';
#NgModule({
imports: [
CommonModule,
BlogpostRoutingModule
],
exports: [
BlogpostFeaturedComponent
],
declarations: [BlogpostFeaturedComponent, BlogpostListComponent, BlogpostDetailComponent, BlogpostRecentComponent, CategoriesComponent],
})
export class BlogpostModule { }
You forgot to include BlogpostModule in your app.module.ts.
I have tried everything on the internet and nothing seems to fix my error.
this is my NgModule :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '#angular/forms';
import { MainLayoutComponent } from './MainLayout/main-layout/main-layout.component';
import { AppRoutingModule } from './app-routing.module';
import { ContainersPageComponent } from './Containers/containers-page/containers-page.component';
import { HttpClientModule } from '#angular/common/http';
import { MatTableModule } from '#angular/material/table';
import { MarinServiceService } from './services/marin-service.service';
import { MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatFormFieldModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
MainLayoutComponent,
ContainersPageComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
FormsModule,
AppRoutingModule,
HttpClientModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatInputModule,
MatSelectModule,
MatFormFieldModule,
],
providers: [MarinServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
This is the exact Error im getting :
)
: 'mat-selection-list' is not a known element:
1. If 'mat-selection-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-selection-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<!--Check Box Search-->
[ERROR ->]<mat-selection-list >
<mat-list-option >
I have tried re-Importing and it didn't work.
I have tried importing everything Mat related.
I really don't know what seems to be the problem.
You need to import MatListModule
import {MatListModule} from '#angular/material/list';
Add it under imports array of the app.module.ts
You need to import Mat List Module in the concerned module.
import {MatListModule} from '#angular/material/list';
More information: https://material.angular.io/components/list/api
Changing backgound color of the paragraph tag using custom directive not working for angular 6 .
#CustomDirective
import { Directive,ElementRef,HostListener } from '#angular/core';
#Directive({
selector: '[appSteps]'
})
export class StepsDirective {
constructor(private elementref: ElementRef){ }
#HostListener('mouseenter')onmouseenter()
{
this.elementref.nativeElement.style.backgroundColor = 'yellow';
}
#HostListener('mouseleave')onmouseleave()
{
this.elementref.nativeElement.style.backgroundColor = 'null';
}
}
#ModuleCreated : Added my directive here and using this module in appmodule.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {StepsDirective} from '../steps.directive';
#NgModule({
imports: [
CommonModule
],
declarations: [StepsDirective]
})
export class StartModule { }
#AppComponent.html-Hosting my custom directive ontag
<p appSteps>My Hero Academia</p>
#app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { Signup_Component } from './signup/signup.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { StartModule } from './start/start.module'; *Module created
#NgModule({
declarations: [
AppComponent,
Signup_Component,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
StartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
you should first export the module that you declare your directive in then import it any where you want to use
#NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }
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 {}