angular-university / angular-material-course Goto Github PK
View Code? Open in Web Editor NEWAngular Material In Depth
Home Page: https://angular-university.io/course/angular-material-course
License: MIT License
Angular Material In Depth
Home Page: https://angular-university.io/course/angular-material-course
License: MIT License
don't forget to tell newbies to prefix the npm install -g with sudo.
The mat-paginator
page counter is based on a "static" property of a course lessonsCount
:
<mat-paginator [length]="course?.lessonsCount"
export const COURSES: any = {
1: {
id: 1,
description: "Angular for Beginners",
iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png',
courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png',
longDescription: "Establish a solid layer of fundamentals, learn what's under the hood of Angular",
category: 'BEGINNER',
lessonsCount: 10
}
and
export const LESSONS = {
1: {
id: 1,
"description": "Angular Tutorial For Beginners - Build Your First App - Hello World Step By Step",
"duration": "4:17",
"seqNo": 1,
courseId: 1
},
2: {
id: 2,
"description": "Building Your First Component - Component Composition",
"duration": "2:07",
"seqNo": 2,
courseId: 1
}
is there a way to remove that property from the course class and use the number of lessons based on the lessons count from the db via courseId, and not from the course property "lessonsCount"?
Hello there,
i've cloned the project via git and did all nessessary steps as described in the video. The project compiles, but it crashes with the following message:
ERROR TypeError: this._sliderInput is undefined
I've updated cli, core and material packages via: ng update @angular/core @angular/cli
and ng update @angular/material
successfully but the application itself still crashing.
Thanks for any help.
Please update code for paginator correct working...
loadLessons(courseId:number,
filter:string,
sortDirection:string,
pageIndex:number,
pageSize:number) {
this.loadingSubject.next(true);
this.coursesService.findLessons(courseId, filter, sortDirection,
pageIndex, pageSize).pipe(
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false))
)
.subscribe((lessonList: LessionList) => {
this.lessonsSubject.next(lessonList.payload)
this._updatePaginator(lessonsList.total)
});
}
get paginator(): MatPaginator | null { return this._paginator; }
set paginator(paginator: MatPaginator|null) {
this._paginator = paginator;
//this._updateChangeSubscription();
}
private _paginator: MatPaginator|null;
_updatePaginator(filteredDataLength: number) {
Promise.resolve().then(() => {
if (!this.paginator) { return; }
this.paginator.length = filteredDataLength;
// If the page index is set beyond the page, reduce it to the last page.
if (this.paginator.pageIndex > 0) {
const lastPageIndex = Math.ceil(this.paginator.length / this.paginator.pageSize) - 1 || 0;
this.paginator.pageIndex = Math.min(this.paginator.pageIndex, lastPageIndex);
}
});
}
then update server side and CoursesService
to get LessionList
from server.
LessionList {
payload: lession[];
total: number
}
and then insert this line after dataSource
initialization in CourseComponent
:
this.dataSource.paginator = this.paginator;
This implementation work correctly.
I opened the project on Stackblitz https://stackblitz.com/github/angular-university/angular-material-course/tree/2-data-table-finished but I get the error:
Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (1098:21)
Can't resolve all parameters for ApplicationModule: (?).
Could you make this project run on Stackblitz?
This is an impressive example. Filtering, pagination, http requests, updated to angular 7....I need every bit of that, but I need a grid of cards instead of a table of rows.
How difficult would it be to switch to cards? Suggestions for getting started?
Below are some other approaches I'm exploring, but these don't support filtering.
https://stackoverflow.com/questions/50810413/how-to-use-angular-material-pagination-with-mat-card
Thanks for sharing,
--Erik
Hi,
I can see the tabs and the menu, but the table can not be displayed under any tab. Why is that?
Thank you
The HTTP Request from the Frontend is being directed to the same server/port:
"Http failure response for http://localhost:4200/api/courses: 404 Not Found"
while the backend server is running on port 9000. Shouldn't the request be going to http://localhost:9000/api/couses?
I can't run the server. It has errors TypeError: Object.values is not a function. Please help
Spent a long time scratching head over this one...in the lesson called "Angular Material Input Field: Lots Of Useful Options" the <mat-error>
directive isn't working. The problem occurs around 11 mins and 20 seconds in the video.
Here's the my code:
import {Component} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';
@Component({
selector: "create-course-step-1",
templateUrl:"create-course-step-1.component.html",
styleUrls: ["create-course-step-1.component.scss"]
})
export class CreateCourseStep1Component {
form = this.fb.group({
title: ['', [
Validators.required,
Validators.minLength(5),
Validators.maxLength(60)
]],
releasedAt: [new Date(), Validators.required],
category: ['BEGINNER', Validators.required],
courseType: ['premium', Validators.required],
downloadsAllowed: [false, Validators.requiredTrue],
longDescription: ['', [Validators.required, Validators.minLength(3)]]
});
constructor(private fb: FormBuilder) {
}
get courseTitle() {
return this.form.controls['title'];
}
}
...and here's the html code:
<div [formGroup]="form" class="course-details-form">
<mat-form-field floatLabel="auto">
<input matInput placeholder="Course title" formControlname="title" #title>
<mat-hint align="end">{{title.value.length}} / 60</mat-hint>
<mat-error *ngIf="courseTitle.errors?.minlength">
A minimum length of 5 characters is required.
</mat-error>
</mat-form-field>
</div>
I've tried all kinds of things, but it just seems like the minLength() validator isn't working. At the moment I have no confidence that any of the validators are working. Any clues much appreciated.
Dear all,
Please the link https://github.com/angular-university/angular-material-course/tree/2-data-table-finished returns error 404.
Could you please send the new link or correct me if I am wrong?
Thank you!
Found this example and it sounded great. I got the zip from github and tried it out. The SSL cert is not valid it would appear.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.