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,
]);
}
}
Related
hello I am really confused that why it is not working its very simple still i am getting issue.
I am getting blank output & my components has some data which is getting updated if i directly call it with its selector.
here is my code.
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 { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
import { DynamicModule } from 'ng-dynamic-component';
#NgModule({
declarations: [
AppComponent,
HeatSealComponent,
PrinterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
[DynamicModule],
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<ng-container *ngComponentOutlet="dumm"></ng-container>
<ndc-dynamic [ndcDynamicComponent]="dumm"></ndc-dynamic>
app.component.ts
import { element } from 'protractor';
import { Component, OnInit } from '#angular/core';
import { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'dynamic-loading';
dumm = HeatSealComponent;
ngOnInit() {
// this.myContent = {name:'nope'};
}
}
The solution is to declare the components in the EntryComponents in the my module file.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
import { DynamicModule } from 'ng-dynamic-component';
#NgModule({
declarations: [
AppComponent,
HeatSealComponent,
PrinterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
[DynamicModule],
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [HeatSealComponent, PrinterComponent], // ADD THIS
})
export class AppModule { }
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 a sidebar in my page with certain options, I want to get redirected in a new page when the options are clicked.
I have an option called 'Pricing Details' when I click it a new page should open with /pricing added to the end of the base the URL. Although, the URL is getting updated, the new page is not opening.
This is my app.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PricingComponent } from './pricing/pricing.component';
const routes: Routes = [{ path: 'pricing', component: PricingComponent}];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is HTML part with the Pricing Section
<li class="sub-menu" name="idk">
<a routerLink='/pricing'>
<span>Pricing Details</span>
</a>
</li>
This is my 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 { SidebarComponent } from './sidebar/sidebar.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { PricingComponent } from './pricing/pricing.component';
import { EstimateComponent } from './estimate/estimate.component';
import { AccountComponent } from './account/account.component';
#NgModule({
declarations: [
AppComponent,
SidebarComponent,
NavbarComponent,
HomeComponent,
PricingComponent,
EstimateComponent,
AccountComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
When I click on pricing details, the URL is updating, but it's staying on the same page.
Make sure you have included <router-outlet></router-outlet> in AppComponent html template
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 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