CodeWithSrini

Angular 6 - Http Request -  Making REST calls with HttpClient

in this video we gonna look into Angular 6 - Http Request -  Making REST calls with HttpClient In modern web applications, we definitely need a bunch of HTTP services on the server. And we make use of this services to fetch or save data to it. In this video I am gonna show you how to build a fake HTTP Services and we gonna use a backend for our services. Todo that, let’s head over to jsonplaceholder.typicode.com. So when you scroll down, you can see various HTTP end points so we have posts, comments, albums, todos, as such. So lets go to posts, you can see bunch of objects here, in a web application, we will be making use of these json objects to display data that is returned from server end points. So when we hit “https://jsonplaceholder.typicode.com/..." we will get the response as we see here.

Source Code: https://github.com/codewithsrini/AngularHttpExample

External Links: https://jsonplaceholder.typicode.com/

00:01:09 - Getting Data from Server 

00:09:48 - Posting a Data 

00:12:39 - HTTP Verb 

00:18:33 - OnInit Interface 

00:18:53 - Life Cycle Hooks 

00:20:22 - Separation of Concerns 

00:25:59 - Error Handling 

Angular 6 - Adding Bootstrap 4 Dropdown Menu in Angular Application and ng-bootstrap

How to add a library like bootstrap 4 in Angular 6 applications and use ng-bootstrap to attach behaviour for dropdown menu. 

Table of Contents: 

00:00:21 - Creating new Angular project 

00:01:44 - npm install Bootstrap 

00:03:45 - Import Bootstrap stylesheet in Angular project 

00:04:54 - Add Bootstrap starter template 

00:07:00 - Creating  navigation component 

00:09:04 - Getting the dropdown working 

Angular 6 - Services, Dependency Injection, Singleton Pattern, @Injectable

Services is a type of category that surrounds by providing features that an app needs. Service is simply a typescript class with a well defined purpose. To increase modularity to your app, Angular distinguishes components from services This is also known as separation of concerns. A components primary job is to interact with template and nothing more. A component mediates between the template and application logic by binding fields, properties and methods to our template. Like a Component, there are certain task that a Component can delegate, such as fetching data from server, validating input data, or sending a data to server. These type of task can be handled by a separate class in our Angular. And that class is called Service

Table of Contents:

00:06 - What is a Service?

04:33 - Creating a Service

08:22 - Dependency Injection

10:50 - Singleton Pattern

12:21 - Creating a Service with Angular CLI

Angular 6 - Directives, Structural Directives, Attribute Directives and Component Directives

Directives are basic building block for an Angular project. Directives consist of three major categories, they are; 

Component Directive 

Structural Directives 

Attribute Directives 

00:23 - Types of Directives

00:53 - Component Directive 

2:29 - *ngFor 

4:22 - *ngFor Exported Values 

8:54 - *ngIf 

16:09 - *ngSwitchCase 

25:12 - Attribute Directive 

25:39 - ngClass 

Angular 6: Components - Angular Building Blocks - Tutorial from Scratch

Components is one of the basic building blocks of Angular.. There are four building blocks of Angular and they are 

Components 

Templates 

Directives & 

Services 

Angular 6 Fundamentals - Tutorial from Scratch

In this video we gonna look at fundamentals of Angular for absolute beginners, which will help them to develop a fully functional Web application from scratch.

What is Angular? 

Why Angular?

Setting up Development Environment

Your First Angular App

Structure of an Angular App