We Keep Coding

Angular 13 Not Seeing Custom Pipes

i am porting over and angular 6 app to angular 13 and i am having trouble with pipes. the app wont compile.
i have a custom pipe on a component that the compiler says doesnt exist
Property 'shortDate' does not exist on type 'TransactionsComponent'.
code is as follows (and works in old version of angular)
angular pipe:
import { PipeTransform, Pipe } from '#angular/core';
import { DatePipe } from '#angular/common';
#Pipe({
name: 'shortDate'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {
override transform(value: any, args?: any): any {
///MMM/dd/yyyy
return super.transform(value, "MM/dd/yyyy");
}
}
html
<div class="dt">{{transaction.transactionDate | date: shortDate}}</div>
Shared Module
#NgModule({
declarations: [
DateFormatPipe
],
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpClientModule,
HttpInterceptorModule,
ReactiveFormsModule,
],
exports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpClientModule,
HttpInterceptorModule,
ReactiveFormsModule ,
],
})
export class SharedModule {
static forRoot(): ModuleWithProviders<SharedModule> {
return {
ngModule: SharedModule,
providers:
[
DateFormatPipe,
]
};
}
}
consuming module
#NgModule({
declarations: [
],
imports: [
SharedModule
],
providers: [
],
})
export class TransactionModule{ }
in app.module
imports: [
SharedModule.forRoot(),
TransactionModule
] ,
please note: I have also tried to put the pipe in the exports section of shared module. that doesnt work either. i'm sure im just missing something silly. does anyone have any ideas?

Try this
<div class="dt">{{transaction.transactionDate | shortDate}}</div>
Try adding standalone: true flag to the Pipe decorator
#Pipe({
name: 'shortDate',
standalone: true
})

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

Angular 6 'app-action-button' is not a known element

i am trying to add component shared between modules. Only thing i am getting is this error.
I was searching for answer on similiar questions, but it did not help and i am constantly getting this error.
Tried to declare it in app.module too, but it results with same error.
Code:
Component
import { Component, Input, EventEmitter, Output } from '#angular/core';
#Component({
selector: 'app-action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.scss'],
})
export class ActionButtonComponent {
private _className = '';
private _buttonText = '';
#Input()
set className(className: string) {
this._className = (className && className.trim() || 'default');
}
get className(): string { return this._className; }
#Input()
set buttonText(buttonText: string) {
this._buttonText = (buttonText && buttonText.trim() || 'n/n');
}
get buttonText(): string { return this._buttonText; }
#Output() buttonActionEvent = new EventEmitter();
constructor() { }
buttonAction() {
this.buttonActionEvent.emit(true);
}
}
Module where i am declaring this component
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { MaterialModule } from '../../material.module';
import { ActionButtonComponent } from '../../shared/action-button/action-button.component';
import { ActionButtonModule } from '../../shared/action-button/action-button.module';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';
#NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, ActionButtonModule],
declarations: [LoginComponent],
entryComponents: [ActionButtonComponent],
providers: [LoginService]
})
export class LoginModule {}
html template
<div class="login-wrapper">
<ng-container *ngIf="isLoading">
<mat-spinner class="loading" diameter="32"></mat-spinner>
</ng-container>
<ng-container *ngIf="!isLoading">
<h2>Zaloguj się za pomocą czytnika</h2>
<form [formGroup]="operator">
<mat-form-field appearance="outline">
<mat-label>ID Operatora *</mat-label>
<input type="text" matInput placeholder="Zeskanuj kod kreskowy" formControlName="id">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Wybór maszyny *</mat-label>
<mat-select formControlName="machine">
<mat-option *ngFor="let machine of machinesList" [value]="machine.externalId">
{{ machine.name }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<!-- <div class="buttons-wrapper">
<button (click)="getUrl()" mat-raised-button>maszyna Bullmer</button>
<button mat-raised-button color="primary">maszyna nieBullmer</button>
</div> -->
<app-action-button [className]="logout-button" (buttonActionEvent)="test()"></app-action-button>
<button [disabled]="!operator.valid" (click)="loginAndSetMachine()" mat-raised-button>
<mat-icon color="primary" fontSet="fas" fontIcon="fa-check" class="material-icons"></mat-icon>
</button>
</ng-container>
</div>
#Edit
I made ActionButton module and imported it in LoginModule. Still getting same error.
ActionButton module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { MaterialModule } from '../../material.module';
import { ActionButtonComponent } from './action-button.component';
#NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
declarations: [ActionButtonComponent],
exports : [ActionButtonComponent],
entryComponents: [],
providers: []
})
export class ActionButtonModule {}

If you want to share it between modules, you have to add it to the exports of the module where you declare it and import that module to the module where you want to use your ActionButtonComponent.
#NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
declarations: [LoginComponent, ActionButtonComponent],
entryComponents: [],
providers: [LoginService],
exports:[ActionButtonComponent]
})
export class LoginModule {}
Your other module:
#NgModule({
imports: [...,LoginModule],
declarations: [],
exports:[]
})
export class OtherModule {}
Now you can use ActionButtonComponent in any component which is declared in OtherModule

You need to make sure that ActionButtonComponent is exported by it's module. After exporting, you can import this LoginModule anywhere and use the component:
#NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
declarations: [LoginComponent, ActionButtonComponent],
exports: [ActionButtonComponent], // This exports the shared component
entryComponents: [],
providers: [LoginService]
})
export class LoginModule {}

Problem was in other template file i tried to use this component declaration...

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.

Can't get input field to show on Angular 4

I'm following this Angular 4 tutorial:
https://youtu.be/z6qFqlwUxkQ?t=16m33s
And in that part of the video he has the following code:
View:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Controller:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}
It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..
EDIT:
here's the contents of app.modue.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Can you post code for app-module.ts
I suspect you are missing something inside #ngModule
Compare that to the video...
I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
NgModule({
....
imports: [ ...,
FormsModule,
ReactiveFormsModule]
....
})
export class AppModule {
}