We Keep Coding

Child component doesn't render - Angular

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

No component factory found for DialogDataExampleDialog. Did you add it to #NgModule.entryComponents?

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".

Can't bind to since it isn't a known property of selector component

I want to pass a variable from one component to another and I'm using #input
This is my parent component :
#Component({
selector: 'aze',
templateUrl: './aze.component.html',
styleUrls: [('./aze.component.scss')],
providers: [PaginationConfig],
})
export class azeComponent implements OnInit {
public hellovariable: number = 100;
}
This is the template of the parent component:
<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>
This is my child component :
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
#Input() hellovariable: number;
constructor() { }
ngOnInit() {
console.log(hellovariable);
}
This is the child template:
<h3>Hello I am {{hellovariable}}<h3>
And this is the app.module.ts:
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
entryComponents: [
MyDialogComponent
],
imports: [
BrowserModule,
routing,
NgbModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
RichTextEditorAllModule,
FullCalendarModule,
NgMultiSelectDropDownModule.forRoot(),
LeafletModule.forRoot(),
NgxGalleryModule,
HttpClientModule,
MatDialogModule,
ReactiveFormsModule
],
When I show my parent component template I get this error:
Can't bind to 'hellovariable' since it isn't a known property of 'app-my-dialog'.
Any idea on how to fix this?

Few thing to try
First make sure you have import Input into your component
import { Component, Input } from '#angular/core';
Then follow pascal convention when naming class
export class azeComponent implements OnInit
should change to
export class AzeComponent implements OnInit
Then register your component into your module declarations
Also import BrowserModule into your module also something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent,
AzeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Mostly you'll get this error because you forgot to declare the component into your app.module.ts or did it wrong
app.module.ts
import { YourSpecificComponent } from './components/measureUnit/measure-unit-monthly/measure-unit-monthly.component';
#NgModule({
declarations: [
AppComponent,
MessageComponent,
DashboardComponent,
.....,
YourSpecificComponent, // declared here
}
your-specific.component.ts
#Component({
selector: 'app-your-specific', // your selector
templateUrl: './your-specific.component.html',
styleUrls: [
'../some.css'
]
})
export class YourSpecificComponent implements AfterContentInit {
.....

ok this error causes because you need to import MyDialogComponent in azeComponent's module.

Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?

I have worked with form builder in angular 2/4, But now I am using it in angular 6. I have seen this question (Can't bind to 'formGroup' since it isn't a known property of 'form') but it was for angular 2.
I doing exact same against angular 4 but I am getting this error. Please help:
my code are:
app.module.ts: ( I have exported FormsModule & ReactiveFormsModule) :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '#angular/http';
import { Router } from '#angular/router';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';
#NgModule({
exports: [
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent,LoginComponent,ForgotComponent
],
imports: [
BrowserModule,
routing,
],
providers: [
LocalStorage,
],
bootstrap: [AppComponent],
})
export class AppModule { }
login.component.ts:
import { Component, ViewContainerRef, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '#angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
#Component({
selector: 'login-app',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
/**
* LoginComponent class
*/
export class LoginComponent {
private loginForm: any;
loginValue:any;
constructor(
private formBuilder: FormBuilder,
private _router: Router,
private httpService: HttpService,
private localStorage: LocalStorage,
) {
this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;
this.loginForm = this.formBuilder.group({
email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
});
}
}
login.component.html: ( Something like this)
<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>
<input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control">
<div class="col-12">
<input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
</div>
<button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block">
<div *ngIf="!loading" class="sign-in">Sign in</div>
</button>
</form>

Add below code in your app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
and in imports array:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
]
The FormGroup is a selector for the FormGroupDirective Directive which mainly used to Binds an existing FormGroup to a DOM element and FormGroupDirective is available in the ReactiveFormsModule module.

So fiddling around with the same frustrating issue -- a clean angular-cli install and a custom subcomponent/module (component.html... ) and the same error ("Can't bind to 'formGroup' since it isn't a known property of 'form' ").
Angular CLI: 7.2.3, Node: 10.9.0, OS: win32 x64, Angular: 7.2.2
I finally got it to work based on the above but with a twist
I put the FormsModule & ReactiveFormsModule imports in app-routing.module.ts (not app.module.ts) + the subcomponent's ts (in my case: forms-demo.component.ts) :
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
....
#NgModule({
imports: [
RouterModule.forRoot(routes),
FormsModule, ReactiveFormsModule
....
Afterward ng build/serve worked without any errors.
I'm not an Angular expert but my guess is that the v7 approach whereby app.module.ts delegates to app-routing, that latter file is where the app & component imports & dependencies take place.... YMMV but hopefully it helps.

Similar to #gloomy.penguin's answer in comment, but a different scenario with the same error.
In my case, I was using a second module and its own routing file.
│ app-routing.module.ts
│ app.module.ts
│
└───second-module
│ second-routing-module.module.ts
│ second.module.ts
│
└───component-1
I had to import the following in second.module.ts rather than app-routing.module.ts
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
....
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserModule
]})
anyone using a second module, please follow this.

import these things in your appmodule.ts
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],

Update app.module.ts as follows in belows diff

import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { MatButtonModule, MatCheckboxModule , MatTableModule, MatDialogModule, MatTabsModule, MatNativeDateModule, MatInputModule, MatSelectModule, MatFormFieldModule} from "#angular/material";
import { MyDialogComponent } from './my-dialog/my-dialog.component';
import {MatDatepickerModule} from '#angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
import { CommonModule } from '#angular/common';
import { HighlightDirective } from './highlight.directive';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent,
HighlightDirective,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatTableModule,
MatDialogModule,
MatTabsModule,
MatNativeDateModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
FormsModule,
ReactiveFormsModule,
NgxMaterialTimepickerModule,
CommonModule,
MatFormFieldModule,
AppRoutingModule
],

Can't bind to 'formGroup' since it isn't a known property of 'form'? why means ? Answer: ' ReactiveFormsModule ' could not load in your component.you just add component name into rootmodule (app.module.ts)
My solution:
**WITHOUT ROUTING**
**app.modules.ts**
STEP1 : import { FormsModule,ReactiveFormsModule } from '#angular/forms';
STEP2 : check your component (AppComponent)loaded or not
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
app.component.html
use and check <form [formGroup]="registerForm"></form>
**WITH ROUTING**
Eg;I have 2 files - form.component.html,form.component.ts
STEP1:Import and add component(FormComponent) loaded or not in app.component.ts(rootcomponent) below here.
import { FormComponent } from "./form/form.component";
#NgModule({
declarations: [
AppComponent,
FormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
});

Can't bind to 'control' since it isn't a known property of (myComponent)

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 ],