Regarding PrimeNg table in Angular 8 - html

I tried to used p-table(PrimeNg table) in my Angular application,I imported all the neccessary dependencies and imports in the module file from the CLI,The error is ,
ERROR in The target entry-point "primeng/table" has missing dependencies:
- #angular/cdk/scrolling
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccordionModule } from 'primeng/accordion'; //accordion and accordion tab
import { MenuItem } from 'primeng/api';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TableModule } from 'primeng/table';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, AccordionModule,TableModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
My component.html is:
<h1>Hello {{ title }}</h1>
<br />
<p-table [value]="detail">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>Aashiq</td>
<td>Aadhil</td>
<td>Zubair</td>
<td>Athaa</td>
</tr>
</ng-template>
</p-table>
My app.component.ts is:
import { Component,OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
throw new Error("Method not implemented.");
}
title = 'Angularprimeng';
detail:any;
}

Good evening!
Have you tried installing the material cdk?
npm install #angular/cdk --save
This should fix your problem.
Regards,
Jonathan

I have faced the same issue.
Kindly install below dependant packages by command through Angular CLI.
npm install --save #angular/material #angular/cdk #angular/animations
then again start the application by command
ng serve.
It worked for me.

I am happy to read that your package dependency problem has been resolved.
For your second question, given your code, it's completely normal that there is nothing in the table.
The pTemplate "body" that you declared in your HTML file is there to structure the information of each element present in your "detail" property which should be an array.
I ask you to carefully read the PrimeNg documentation to correct your error.
https://primefaces.org/primeng/showcase/#/table
I hope I've helped you. Have a nice evening and see you soon !

Related

Icons not being displayed in Angular Material List

I am attempting to display a list of the names of users of my application. Included
in the display is supposed to be an icon button which will perform some action
when pressed. I am using Angular Material components.
I believe I have all the important imports to the module. The code below shows
the material design components I imported:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MatListModule } from '#angular/material/list';
import { MatToolbarModule,
MatCardModule,
} from '#angular/material';
import { routeCmp } from './app.router';
import { NewuserModule } from './newuser/newuser.module';
import {MatIconModule} from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
#NgModule({
declarations: [
AppComponent,
MainComponent,
],
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule,
MatListModule,
MatIconModule,
BrowserAnimationsModule
],
// the rest of the code omitted for brevity
})
export class AppModule { }
Based on examples I've seen on the Internet, I have the following HTML for my
display:
<mat-nav-list>
<mat-list-item *ngFor="let names of userNames">
<div matLine>{{ names }}</div>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
Note that userNames is (currently) just an array of strings.
My code is similar to the code shown below, which is taken from an example at
https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html
<h5>Complex Nav List</h5>
<mat-nav-list>
<mat-list-item *ngFor="let link of links">
<a matLine href="javascript:void(0)">{{ link }}</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
The display from the example is shown in the picture below:
Unfortunately, what I am seeing instead is a button and text:
Obviously, I am missing something. There is something not described in the example that
makes it work. I did try recreating the example code in my own development setup, based
on what I downloaded from the site. The example code failed to properly display the
icon in my environment.
Can someone tell me what I am missing here? How can I get my list to properly display
the icons in my list?
You need to import Material Icons fonts into your project.
In index.html, add the following code.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Since you are using mat-icon-button, you also need to import MatButtonModule into your AppModule imports.
You appear to be missing the MatButtonModule in your AppModule's imports.

Ionic4 Angular attribute directive having no effect

I have created a simple directive that works in an angular demo app according to the guide here.
The appHighlight directive works in Angular, but does nothing when applied in a new blank Ionic-v4 app.
Here are the steps I took to create this ionic project:
ionic start directiveTest blank --type=angular
ionic generate directive Highlight
imported ElementRef from ‘#angular/core’ and injected into
HighlightDirective constructor as shown below.
set ElementRef.nativeElement.style.backgroundColor = ‘yellow’ inside
the directive constructor
checked to make sure HighlightDirective was declared in
app.module.ts added ‘appHighlight’ to tag in home.page.html
Is this expected to work as shown, or am I missing something? Thanks!
highlight.directive.ts:
import { Directive, ElementRef } from '#angular/core';
#Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
app.module.ts:
#NgModule({
declarations: [AppComponent, HighlightDirective],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html:
<ion-content padding>
The world is your oyster.
<p appHighlight> test </p>
</ion-content>

Insert HTML into string

Using Angular 5 and Firebase, I have created a review website that allows users to create reviews on the CreateComponent and read them on the ReviewComponent. I'd like the body of the review to be able to contain HTML for links or images.
The ReviewComponent pulls the body of the review with:
<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>
I am using pre-wrap to maintain the body's line breaks.
An example input from the CreateComponent would be:
I already can’t wait to see what comes next.
When I inspect the output of the body I see this:
<p _ngcontent-c1 style="margin-bottom: 2rem; white-space: pre-wrap;">I already can’t wait to see <a href="http://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown">what comes next.</a></p>.
How can I change the HTML to enable the string to work correctly with links and images?
Binding review.body to [innerHTML] corrected this.
<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>
is now
<p style="margin-bottom: 2rem; white-space: pre-wrap;" [innerHTML]="review.body"></p>
Here is solutions for your issue:
https://plnkr.co/edit/VHvVpvnTeoGWsA0d3eex?p=preview
Here is code:
//our root app component
import {Component, NgModule, VERSION, Pipe, PipeTransform, ChangeDetectorRef } from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
import { FormsModule } from '#angular/forms';
#Component({
selector: 'my-app',
template: `
<div [outerHTML]='selectedValue | html'></div>
`,
})
export class App {
selectedValue: string = 'I already can’t wait to see what comes next.';
constructor(private cd: ChangeDetectorRef) {
}
}
#Pipe({
name: 'html'
})
export class HtmlPipe implements PipeTransform {
transform(value: string) {
return `<div>${value}</div>`;
}
}
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App, HtmlPipe ],
bootstrap: [ App ]
})
export class AppModule {}
You could write pipe for this application, like in this article:
How to allow html in return of angular2 pipe?

Angular 4 *ngIf not showing error message for custom validation

I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular here.
Here is my code set up:
<div class='col-xs-12 col-sm-5'>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input class="form-control input-md"
#firstName="ngModel"
required name="firstName"
minlength="4" appForbiddenName="bob"
type="text"
placeholder="First Name"
[(ngModel)]="personal.firstName">
<div style="font-size: 12px; color: red;"
*ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
<div *ngIf="firstName.errors.required">*Required</div>
<div *ngIf="firstName.errors.minlength">Min length is 4</div>
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
</div>
</div>
</div>
In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
/* App Root */
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
/* Feature Components */
import { PersonalComponent } from './personal/personal.component';
import { IncomeComponent } from './income/income.component';
import { BankComponent } from './bank/bank.component';
import { AddressComponent } from './address/address.component';
import { ResultComponent } from './result/result.component';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
/* Shared Service */
import { FormDataService } from './data/formData.service';
import { WorkflowService } from './workflow/workflow.service';
import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';
/* Animation Modules */
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule
],
providers: [
{ provide: FormDataService, useClass: FormDataService },
{ provide: WorkflowService, useClass: WorkflowService }
],
declarations: [
AppComponent, NavbarComponent, PersonalComponent, IncomeComponent,
BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm following the live example from angular.io's documentation and if I type the forbidden name "bob" in the input field, it's coming up as an error but the error message won't display.
screenshot
Other error messages, such as 'required' or 'min length is 4' are showing but not the error message for forbidden name. The input field is being highlighted red like I've styled to show it's an invalid input, but no error message for the custom validator appForbiddenName (or any other custom validation I've added).
I'm new to both Angular and Typescript, so excuse the potentially amateurish question. Someone please help, it seems trivial but I'm not sure everything Angular's doing.
Also, to build this angular app, I followed the tutorial here.
Your error is in this line:
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
It should only be firstName.errors.forbiddenName
<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>
And also when you are using *ngIf or *ngalert module , import the common module from the angular. This will save from any further errors regarding this.
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
..,
..,
CommonModule
],
declarations: []

Angular does not recognise a selector within Template even if it has been declared in Component

I can't work out why Angular will not allow me to reference my components selector. I have a page which when you click on a list item the page should bring up another templates html. This is my code.
The error I keep receiving is 'message-component' is not a known element:
1. If 'message-component' is an Angular component, then verify that it is part of this module.
2. If 'message-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Messages.component.html
<div id="Case" class="w3-container city" style="display:none">
<h2>Case</h2>
<message-case> </message-case>
</div>
I don't understand why it is giving me this error when the Message Component is declared and imported in both the NgModule and within the component.
Messages.Module.ts
#NgModule
({
imports: [SharedModule],
declarations: [
MessagesComponent,
MessageCaseComponent,
MessagesFilterPipe,
CreateMessageComponent,
],
})
Finally this is the file I am trying to display using the components selector
import { Component, OnInit } from '#angular/core';
import { IMessage } from './message';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {MessagesComponent} from './messages.component';
import {CreateMessageComponent} from './createmessage.component';
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: 'message-case.html'
})
All help would be appreciated! I'm seemingly at a dead end right now.
Firstable the name file is wrong you putted this filename in the description
"Messages.component.html"
And the path of the template must contains "./" if it is in the same folder if it is in another folder you must put the relative path folder/file
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: './Messages.component.html'
})