I created a child component on my Shared Module, to display alert message. But when I injected it in my Parent Component, I saw the tag in my console but not the Bootstrap's Card inside my component.
alertmessage.component.ts :
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'alertmessage',
templateUrl: './alert-message.component.html',
styleUrls: ['./alert-message.component.scss']
})
export class AlertMessageComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
alertmessage.component.html :
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
shared.module.ts :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TranslateModule } from '#ngx-translate/core';
import { NgxBootstrapModule } from './modules/ngx-bootstrap.module';
import { BeginsWithPipe } from './pipes/begins-with.pipe';
import { ShortUrlPipe } from './pipes/short-url.pipe';
import { AlertMessageComponent } from './components/alert-message/alert-message.component';
#NgModule({
declarations: [AlertMessageComponent],
imports: [
CommonModule,
NgxBootstrapModule,
TranslateModule
],
exports: [
CommonModule,
NgxBootstrapModule,
TranslateModule,
AlertMessageComponent
],
providers: []
})
export class SharedModule { }
Here is my folder composition :
Core
Shared
Components
alert-message
.ts
.html
.css
Pipes
shared.module.ts
Public
Private
admin
admin
qr-code-management
.ts
.html
.css
create
.ts
.html
.css
update
.ts
.html
.css
upload-file
admin.module.ts
private.module.ts
admin.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { ZXingScannerModule } from '#zxing/ngx-scanner';
import { NgxKjuaModule } from 'ngx-kjua';
import { SharedModule } from 'src/app/shared/shared.module';
...
#NgModule({
declarations: [...],
imports: [
CommonModule,
SharedModule,
FormsModule, ReactiveFormsModule,
CKEditorModule,
ZXingScannerModule,
NgxKjuaModule
],
exports: [
FormsModule, ReactiveFormsModule,
CKEditorModule,
ZXingScannerModule,
NgxKjuaModule
]
})
export class AdminModule { }
private.module.ts
import { NgModule } from '#angular/core';
import { PrivateRoutingModule } from './private-routing.module';
import { SharedModule } from '../shared/shared.module';
import { AdminModule } from './admin/admin.module';
#NgModule({
declarations: [],
imports: [
SharedModule,
PrivateRoutingModule,
AdminModule
]
})
export class PrivateModule { }
And for example in my update.component.html
<h1 class="card-header blue">QR CODE MANAGEMENT - UPDATE</h1>
<alertmessage></alertmessage>
Then I get this in my console, where we can see the tag in the component, but nothing inside..
check your actual file name and the one you have used in template url those are different I think. the actual file name and the one in template url path should match
Related
I am new on Angular. I am integrating MatDialog . I copied code from Angular official documentation https://material.angular.io/components/dialog/overview. I am facing this error when i click on Open dialog.
Here is My donations.component.ts
import {MatDialog, MAT_DIALOG_DATA} from '#angular/material/dialog';
export interface DialogData {
animal: 'panda' | 'unicorn' | 'lion';
}
#Component({
selector: 'app-donations',
templateUrl: './donations.component.html',
styleUrls: ['./donations.component.css']
})
export class DonationsComponent implements OnInit {
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(DialogDataExampleDialog, {
data: {
animal: 'panda'
}
});
}
ngOnInit(): void {
}
}
#Component({
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
})
#Injectable({ providedIn: 'root' })
export class DialogDataExampleDialog {
constructor(#Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}
Here is My donations.module.ts
import { CommonModule } from '#angular/common';
import { DonationsComponent } from './donations.component';
import { DialogDataExampleDialog } from './donations.component';
import { DonationsRoutingModule } from './donations-routing.module';
import {MatTableModule} from '#angular/material/table';
import { MatPaginatorModule } from '#angular/material/paginator';
import { MatSortModule } from '#angular/material/sort';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import {MatCheckboxModule} from '#angular/material/checkbox';
import {MatSelectModule} from '#angular/material/select';
import {MatButtonModule} from '#angular/material/button';
import {MatIconModule} from '#angular/material/icon';
import {MatMenuModule} from '#angular/material/menu';
#NgModule({
declarations: [DonationsComponent,DialogDataExampleDialog],
imports: [
CommonModule,
DonationsRoutingModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatMenuModule,
],
exports: [DonationsComponent],
entryComponents: [DialogDataExampleDialog],
})
export class DonationsModule { }
Here is My donations.component.html
<button mat-button (click)="openDialog()">Open dialog</button>
Here is My dialog-data-example-dialog.html
<div mat-dialog-content>
My favorite animal is:
<ul>
<li>
<span *ngIf="data.animal === 'panda'">✓</span> Panda
</li>
<li>
<span *ngIf="data.animal === 'unicorn'">✓</span> Unicorn
</li>
<li>
<span *ngIf="data.animal === 'lion'">✓</span> Lion
</li>
</ul>
</div>
I will be very thankful for solve my problem.
I'm not sure if its the true problem but you don't need the #Injectable annotation on the DialogDataExampleDialog since it is already a #Component.
Perhaps try that?
Visit here Angular material dialog sample,
This is based on #moufed's code. (#moufed, thanks for yours)
I just add one line to styles.css. This will show box as you wish.
#import "~#angular/material/prebuilt-themes/deeppurple-amber.css";
Anyway, In case of this, we need to check this "dynamically load a component by type imperatively".
Of course, OP's code is implement number 2,
A component should be "entryComponents" of AppModule (app.module.ts or main.ts)
A component should be "entryComponents" of your module
--> your module should be "imports" of AppModule.
Here is donation.module.ts
#NgModule({
declarations: [DonationsComponent,DialogDataExampleDialog],
imports: [
CommonModule,
exportsModules
],
exports: [DonationsComponent,DialogDataExampleDialog,...exportsModules],
entryComponents: [DialogDataExampleDialog ], // Add component to entryComponents
})
export class DonationsModule { }
Here is app.module.ts
#NgModule({
imports: [
BrowserModule, FormsModule ,BrowserAnimationsModule,
DonationsModule // Should be here your module that contains entryComponents
],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
If we need to use some component dynamically with ViewContainerRef or something like that our component should be "entryComponents".
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I was trying to learn angular. But I am getting some issue.
In it, I am using lazy loading module base. I create a admin module and also call it in app.module. I also add commonModule in admin.module.ts and BrowserModule in app.ts.
On adding the array, I getting the issue.
Can't bind to 'ngForOf' since it isn't a known property of 'div'.
Here is the screenshot of error
[![enter image description here][1]][1]
Here is admin.module
import { NgModule } from '#angular/core';
import { CommonModule } from "#angular/common";
import { HttpClientModule } from '#angular/common/http';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { AdminHeaderComponent } from '../shared/admin-header/admin-header.component';
import {AdminSidebarComponent } from '../shared/admin-sidebar/admin-sidebar.component';
import {galleryService} from '../services/gallery.service';
#NgModule({
imports: [
CommonModule,
AdminRoutingModule,
HttpClientModule
],
declarations: [
AdminComponent,
AdminHeaderComponent,
AdminSidebarComponent
],
providers: [
galleryService
]
})
export class AdminModule { }
App.ts
import { BrowserModule } from '#angular/platform-browser';
import {CommonModule} from '#angular/common';
import { NgModule } from '#angular/core';
import {AdminModule} from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoginComponent } from './general/login/login.component';
import { RegisterComponent } from './general/register/register.component';
import { AdminComponent } from './admin/admin.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AuthGuard } from'./general/auth.guard'
import { SecurityService } from './services/security.service';
import { ErrorService } from './services/error.service';
import { ReactiveFormsModule } from '#angular/forms';
import {HttpClientModule, HTTP_INTERCEPTORS} from '#angular/common/http';
import {JwtInterceptor, ErrorInterceptor} from './_helper';
// used to create fake backend
import { fakeBackendProvider } from './_helper';
import { CardComponent } from './shared/card/card.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginComponent,
RegisterComponent,
CardComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AdminModule,
ReactiveFormsModule,
HttpClientModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot() // ToastrModule added
],
providers: [AuthGuard, SecurityService, fakeBackendProvider,
{
provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true
},
{
provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is the HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-4" *ngFor="let item of gallerylist">
<div class="card">
<div class="card-header">
<h4 class="card-title card-header-primary">Simple Table</h4>
<p class="card-category"> Here is a subtitle for this table</p>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
list.component.ts
getGallery(){
this.gallery.getAllGallery().subscribe((data: any) => {
this.gallerylist = data;
console.log(this.gallerylist);
})
}
[![enter image description here][5]][5]
I also studied the previous articles but I did not getting solution. Please help me.
Thanks in advance.
After checking everthing and its goes fine. Than you have to check angular.json file.
May be you added any jquery script which create any element through script.
I fix it by removing the unwanted script from angular.json.
Thanks
I am trying to use Angular flex-layout in one of my modules but I cannot make it work.
When I import flex-layout in app module it works just fine but only in the app component.
When I import flex-layout in another module it doesn't work at all. I don't get any errors, it just doesn't work.
My code:
// App module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FlexLayoutModule } from '#angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlexLayoutModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
.
// AppComponent HTML - WORKS
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
.
// Other module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FlexLayoutModule } from '#angular/flex-layout';
import { SomeRoutingModule } from './some-routing.module';
import { SomeComponent } from './pages/some-component/some-component.component';
#NgModule({
declarations: [SomeComponent],
imports: [
CommonModule,
FlexLayoutModule,
SomeRoutingModule
]
})
export class GameModule { }
.
// SomeComponent HTML - DOESN'T WORK
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
Try importing the GameModule in the AppModule under the imports.
But, I would recommend you to create a shared module and place the flex-layout there beacuse latest Angular versions support shared module and is considered as best practice. More instructions on how to create a shared module is as follows:
https://angular.io/guide/styleguide#shared-feature-module
i have an issue using angular routinglink, since the following page didnt showing after i click the link. The URL give me the right path, but its not showing anything, with no error found.
i have already read the documentation from a link and some example from stackoverflow
here's the sample of my code
app.module.ts
import { BrowserModule, enableDebugTools } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { LoginComponent } from './shared/login/login.component';
// Deklarasi Routing
const routingAplikasi : Routes = [
{path : 'login', component : LoginComponent}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule.forRoot(routingAplikasi),
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { LoginComponent } from './login/login.component';
import { RegistrasiComponent } from './registrasi/registrasi.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
declarations: [NavbarComponent, LoginComponent, RegistrasiComponent, FooterComponent],
exports: [
NavbarComponent, FooterComponent, LoginComponent
],
imports: [
CommonModule,
RouterModule
]
})
export class SharedModule { }
navbar.component.html
<form class="form-inline">
<a routerLink="/login" routerLinkActive="active" class="btn btn-primary">Masuk</a>
<a routerLink="/daftar" class="btn btn-primary">Daftar</a>
</form>
app.component.html
<navbar></navbar>
<!-- Begin page content -->
<div class="container">
<router-outlet></router-outlet>
</div>
<footer-bar></footer-bar>
i expect the output of "Login Works" that is the value of LoginComponent.
this is my app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
// import { CountryDetailsComponent} from './country-detail.component';
// import { LandingPageComponent} from './landing-page.component';
import { routing } from './app.routing'
import { TypeaheadModule } from 'ng2-bootstrap/components/typeahead';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { TabsModule } from 'ng2-bootstrap/ng2-bootstrap';
import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
#NgModule({
imports: [ BrowserModule, HttpModule, routing, FormsModule, ReactiveFormsModule, TypeaheadModule, TabsModule, CollapseModule, AlertModule],
declarations: [ AppComponent ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I have this angular2 components:
import {ErrorMessagesComponent} from '../error-messages.component';
import {ValidationComponent} from '../validation.component';
import {GasType} from "../gas-type";
export class CountryDetailsComponent extends LoadingPage implements OnInit {
countryName: string;
productionForm: FormGroup;
..
}
and
import { Component, Input } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
import { ValidationComponent } from './validation.component';
#Component({
selector: 'error-messages',
template: `<div style="color:#E82C0C; margin: 6px 0;" *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ErrorMessagesComponent {
#Input() control: FormControl;
constructor() { }
and template country-details.component.html:
<div class="col-lg-10 ">
<input class="price-format form-control" type="text"
[formControl]="productionForm.controls.priceFormat"
[(ngModel)]="productionConfig.priceFormat"
id="inputPriceFormat"
name="priceFormat">
<error-messages [control]="productionForm.controls.priceFormat"></error-messages>
</div>
but i get this error:
Can't bind to 'control' since it isn't a known property of 'error-messages'.
1. If 'error-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'error-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message.
("nputPriceFormat"
name="priceFormat">
<error-messages [ERROR ->][control]="productionForm.controls.priceFormat"></error-messages>
</div>
"): b#43:36
how should i fix this?
The component needs to be registered with an #NgModule()
declarations: [ AppComponent, ErrorMessageComponent ],