I'm trying to creating an application that shows different events but when I load the webpage, it is empty and the console says 'Can't bind to 'ngForEvent' since it isn't a known property of 'div'. How do I fix that so the events are seen on the webpage?
events-list.component.ts
import { Component } from '#angular/core'
#Component({
selector: 'events-list',
template: `
<div>
<h1>Upcoming Angular Events</h1>
<hr/>
<div class="row">
<div *ngFor="Let event of events" class="col-md-5">
<event-thumbnail [event]="event"></event-thumbnail>
</div>
</div>
</div>
`
})
export class EventsListComponent {
events = [
{
id: 1,
name: 'Angular Connect',
date: '9/26/2036',
time: '10:00 am',
price: 599.99,
imageUrl: '/assets/images/angularconnect-shield.png',
location: {
address: '1057 DT',
city: 'London',
country: 'England'
},
sessions: [
{
id: 1,
name: "Using Angular 4 Pipes",
presenter: "Peter Bacon Darwin",
duration: 1,
level: "Intermediate",
abstract: `Learn all about the new pipes in Angular 4, both
how to write them, and how to get the new AI CLI to write
them for you. Given by the famous PBD, president of Angular
University (formerly Oxford University)`,
voters: ['bradgreen', 'igorminar', 'martinfowler']
}
}
}
you can use #Input decorator for this problem.
https://angular.io/guide/inputs-outputs
this link also help to solve the problem.
Related
I am new to angular. As part of my baby steps , I have a ng-select(multiple)component.
this is my component.html
<label>Multiselect with custom bindings</label>
<ng-select [multiple]=true>
<ng-option *ngFor= "let city of cities" [value]="city.id"> {{city.name}}</ng-option>
</ng-select>
component.ts
cities = [
{ id: 1, name: 'Vilnius' },
{ id: 2, name: 'Kaunas' },
{ id: 3, name: 'Pavilnys' },
{ id: 4, name: 'Pabradė' },
{ id: 5, name: 'Klaipėda' },
];
I have custom component called tags which styles the selected values.
<tags [(ng-model)]="values" </tags>
My query is I need to pass these selected values to this component and display the styled selected values in the same place . Please help!. Thanks in advance.
Passing the selected values to the component:
component.ts:
selectedValues = [];
component.html:
add the following to your ng-select:
[(ngModel)]="selectedValues"
It will automatically update this array.
Then you can display the array data again where you need them.
Not sure if this answers your question. What do you mean by 'display the styled selected values in the same place'?
Basically, I've created a HTML that similar to the example :
<div *ngFor="let formElements of formTemplate">
<div *ngFor="let opt of staticEnumVals[formElements.testId]">
<!-- do smth here -->
</div>
</div>
Basically formTemplate is an Array with Objects, each Object has a property called "testId".
staticEnumVals is an Object thats build like that
{
"testId": [ {},{},{} ],
"testId2" [ {},{},{} ],
}
The keys "testId" and "testId2" are actual keys that match the Keys from formTemplate[i].testId.
Basically I want to iterate through an array out of my staticEnumVals and the array is selected dynamically based on the id from the first *ngFor
Basically im looking for an elegant way to achieve my second iteration, square brackets doesnt work.
I think my problem is clear enough, im sorry for the weird title.
Thanks in advance
After adding types to the staticEnumVals this worked for me.
#Component({
selector: 'test',
template: `
<div *ngFor="let formElements of formTemplate">
<div *ngFor="let opt of staticEnumVals[formElements.testId]">
{{opt.name}}
</div>
</div>
`
})
export class TestComponent {
private formTemplate: { testId: string }[] = [
{testId: '3'}, {testId: '2'}, {testId: '3'}
];
private staticEnumVals: { [id: string]: [any] } = {
'1': [{name: 'id1'}],
'2': [{name: 'id2'}],
'3': [{name: 'id3'}],
};
}
I am trying to fetch a specific customer detail by clicking on a customer id or name, I have made name as a link so that when clicking it will route to a next page with id as a parameter,and display all the details of the specific customer, so can anyone suggest me a easy way to perform this in angular 6 . (link about a demo project will be helpful)
Am assuming many things here but what I understood is you have two different pages - one where you have the customer with an id and based on that id you want to navigate to a different page which contains the customer details.
Let`s say it is customer component. so, HTML would have some button or a link which will be like:
<button type="button" class="btn btn-info desc" (click)="openCard(card._id)">Open</button>
In your customer component you will have an event listener:
public openCard(_id: string) {
this.router.navigate(['/detail', _id]);
}
You will have a routing module which will be responsible for different routings taking place:
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: CardComponent },
{ path: 'detail', component: CardDetailComponent },
{ path: 'detail/:details', component: CardDetailComponent },
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
The last line inside the path is responsible for handling the id part which will be utilized to do the necessary logic inside the customer detail component. This routing module should be imported in your app module.
In the customer detail component.
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.fetchDataService.getData().subscribe( data => {
this.cards = [...data];
this.cardDetails = this.cards.find(card => card._id === params.details);
})
});
}
And then inside card detail template:
<div class="card" *ngIf="cardDetails">
<img class="card-img-top" src="../assets/avatar.png" alt="{{cardDetails.title}}">
<div class="card-body">
<h5 class="card-title">{{cardDetails.title}}</h5>
<p class="card-text">{{cardDetails.description}}</p>
</div>
</div>
You can have a look at this repo which I created some time back if you want more details: GitHub Angular 5 Seed Master
Though this is in angular 5. The code will not be very different for Angular 6.
This also contains using a service to fetch data from mock json.
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
(use above code in component .ts file(on select))
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div>
<span>id: </span>{{selectedHero.id}}
</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
(use above code in component.html file(selected hero details))
I am writing this post after having read several threads concerning this topic but no one of them gives me what I need. This post seems to have the solution but I do not have to read the checked values from the json.
All I need is to:
read countries from an array of objects
build dinamically a list of checkbox representing each country
user should check and uncheck each checkbox
bonus:
get the value of the checked input and send it outside the component
I know It might be really dumb to do but all I have accomplished untile now is to have a list of uncheckable checkboxes and nothing more.
Here is the code:
Template:
<div class="form-group">
<div *ngFor="let country of countries">
<input type="checkbox"
name="countries"
value="{{country.id}}"
[(ngModel)]="country"/>
<label>{{country.name}}</label>
</div>
</div>
And TS:
countries = [
{id: 1, name: 'Italia'},
{id: 2, name: 'Brasile'},
{id: 3, name: 'Florida'},
{id: 4, name: 'Spagna'},
{id: 5, name: 'Santo Domingo'},
]
I tried to use the reactive forms but that gave me more issues then template driven (surely because of bad implementation of mine).
Please, help me, I do not know where to bump my head anymore
Here is a working example, where you can observe that an additional 'checked' value is added to each country, and bound to the value of each checkbox with [(ngModel)].
Stackblitz live example
template:
<p>
Test checkboxes
</p>
<div *ngFor="let country of countries; let i = index;">
<input type="checkbox" name="country{{country.id}}" [(ngModel)]="countries[i].checked">
<label for="country{{country.id}}">{{country.name}}</label>
</div>
<button type="button" (click)="sendCheckedCountries()" *ngIf="countries">Click to send the selected countries (see your javascript console)</button>
<p *ngIf="!countries">loading countries, please wait a second...</p>
<p *ngIf="countries">Debug info : live value of the 'countries' array:</p>
<pre>{{ countries | json }}</pre>
component :
//...
export class AppComponent implements OnInit {
public countries: Country[];
constructor(private countryService: CountryService) {}
public ngOnInit(): void {
// loading of countries, simulate some delay
setTimeout(() => {
this.countries = this.countryService.getCountries();
}, 1000);
}
// this function does the job of sending the selected countried out the component
public sendCheckedCountries(): void {
const selectedCountries = this.countries.filter( (country) => country.checked );
// you could use an EventEmitter and emit the selected values here, or send them to another API with some service
console.log (selectedCountries);
}
}
To use some proper TypeScript, I made an interface Country :
interface Country {
id: number;
name: string;
checked?: boolean;
}
I hope you get the idea now.
Note : the checked value is not "automatically there" at the beginning, but it doesn't matter.
When not there, it is the same as undefined, and this will be treated as false both in the checkbox and in the function that reads which country is checked.
For the "sending value" part :
The button will output the selected value to the browser's console, with some filter similar to what #Eliseo's answer suggests (I just used full country objects instead of ids)
For "real usecase" situation, you could use Angular's EventEmitters and have your component "emit" the value to a parent component, or call some service function that will make a POST request of your values to another API.
Your countries like
{id: 1, name: 'Italia',checked:false},
Your html like
<div *ngFor="let country of countries">
<input type="checkbox" [(ngModel)]="country.checked"/>
<label>{{country.name}}</label>
</div>
You'll get an array like, e.g.
[{id: 1, name: 'Italia',checked:false},{id: 2, name: 'Brasile',checked:tue}..]
you can do
result=this.countries.filter(x=>x.checked).map(x=>x.id)
//result becomes [2,...]
I had an error using [(ngModel)]
In case it serves anyone, I have solved the problem changing
[(ngModel)]
to:
[checked]="countries[i].checked" (change)="countries[i].checked= !countries[i].checked"
I have tried to achieve a multilevel sidenav and I found this that meets my requirements:
angular-material-multilevel-menu
Demo - Note the accordion type
Unfortunately this is created for AngularJS (1.0?), which seems to not work in Angular 6.
My questions are:
Is there any other multilevel sidenav component for Angular 6? Have note found any similar on Google that works.
Is it possible to "upgrade" this Angular 1.0 menu to Angular 6? How?
Is there any simple instructions or courses to build your own multilevel side nav? There are many instructions for one-level, but I have found none multi-level.
I don't know if you are still looking for angular-material-multilevel-menu but I have found one made by ShankyTiwari.
Here is the link for GitHub and the link for the demo.
Very easy to use and to implement. For example, I implemented it in a sidebar because it does not exist with Angular material.
If not an alternative would be PrimeNG as #Dino said.
Angular Material 6.0 doesn't come with multilevel menu out of the box. You would have to create it on your own. It would be a combination of Nested Menu, and Side Nav.
And to answer your first question, I'd suggest you to take a look at PrimeNG's Panel Menu. It does exactly what you need and with some little effort, you'll also be able to change it's design into Material like. (I did it with some PrimeNG components, so I can confirm that it works.
Please take in consideration that PrimeNG 6.0.0 is currently in
Alpha-2 version.
I found a PART of a solution.
Here is a demo using "mat-expansion-panel"
There are still some issues that must be solved.
The shadow and offset of the Expansion Level
The shutdown instead of stay selected
Better way to do this?
Any suggestions?
I was looking to create multi-level menus with native angular material but still under development by ng material team. So, I'd like to suggest to use ng-material-multilevel-menu package for now by follow the below:
npm install --save ng-material-multilevel-menu or yarn add --save ng-material-multilevel-menu
Then import NgMaterialMultilevelMenuModule by
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
/* Import the module*/
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgMaterialMultilevelMenuModule // Import here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Call <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> in your html.
Finally, declare appitems for your list items and config object
appitems = [
{
label: 'NPM',
icon: 'favorite',
link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
externalRedirect: true
},
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor',
onSelected: function() {
console.log('Item 1.2.2.1');
}
}
]
}
]
}
]
},
{
label: 'Item 2',
icon: 'alarm',
items: [
{
label: 'Item 2.1',
link: '/item-2-1',
icon: 'favorite'
},
{
label: 'Item 2.2',
link: '/item-2-2',
icon: 'favorite_border'
}
]
},
{
label: 'Item 3',
link: '/item-3',
icon: 'offline_pin',
onSelected: function() {
console.log('Item 3');
}
},
{
label: 'Item 4',
link: '/item-4',
icon: 'star_rate',
hidden: true
}
];
config = {
paddingAtStart: false,
classname: 'my-custom-class',
listBackgroundColor: '#fafafa',
fontColor: 'rgb(8, 54, 71)',
backgroundColor: '#fff',
selectedListFontColor: 'red',
interfaceWithRoute: true
};
Note: interfaceWithRoute will enable root item to be linkable if link property is available.