Category: Web Programming

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop. https://angular.io/ Important Commands: npm install -g @angular/cling new hello-worldng build --prod (for generating production ready files)ng serve and the app is available at http://localhost:4200To create a component use the command ng g c courseTo create services use the command; ng g s service-nameng add @angular/material OR npm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install --save hammerjsng add angular-bootstrap-md Core Angular Concepts: InterpolationProperty interpolationClass bindingStyle bindingEvent bindingTemplate reference variablesTwo way bindingStructural...
forward

This post describes the steps to integrate Quill Editor in an angular project. Run the following commands in your angular project directory: npm install ngx-quill --save npm install quill --save Inside app.module.ts or any shared module import the QuillModule import { QuillModule } from 'ngx-quill'; Add the following in imports array: QuillModule, // inside app.module.ts or any shared module Add following in index.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css"> Now add the following where you want to display editor: <quill-editor></quill-editor> <!--replace existing text areas with this tag and rest will be handled by this-->...
forward

This blog post describes step by step process to add like/love reactions in angular project. Step 1: Create a component by using the command ng g c e.g ng g c postReactions Step 2: <button (click)="incrementLove()"> love it{{post.loveCount}} </button> I have added a button in the html file of the post reactions component Step 3: On the blog page, we have a list of blog posts and we want to add post reactions in each post, so we have added the selector for post reactions at the bottom of each post inside the loop <app-post-reactions [postType]='posts' [post]='post'><br> </app-post-reactions> Also, you...
forward

Let's say that we have data in array e.g tasks = ['task 5', 'task 4', 'task 3', 'task 2', 'task 1']. Now when we will use ngFor then it will display the data like this: *ngFor="let task of tasks; let i = index" Task #{{i}}: {{task}} Output: Task 0: task 5 Task 1: task 4 Task 2: task 3 Task 3: task 2 Task 4: task 1 But we want to reverse the order of only the index. In order to do that in ts file of the angular components, define a veriable named as totalTasks: number. Now make it...
forward