Learn Angular 5 -Angular 5 Services
Hi Learner I’m thanks to you, to reading this article. In this article you will be learning about Angular 5 services .Before diving into this article have look on previous articles.
From previous articles you learned ,about Angular 5 introduction, Components of Angular5 , Data binding and Directives in Angular 5
In this article you will be learning about
What is Services In Angular 5?
Angular 5 services are best way to share information among the components of the angular application
Creation of Angular 5 services
The Angular CLI will allows you to creating services in Angular application. With help of these service you will be sharing data into Angular components. The creation of services in Angular 5 is as same as components in angular5 ,
You will be creating two components and one services, to consume the Angular services in two components
$ng generate services name of the service or shorthand syntax
$ng g service name
$ng g services server/user or $ng generate services server/user,
here g for generate the component and user is name of the services name. Each and every services file is .ts file same as component files .Then open file located at the path in code editor , it will be look like
src -> app -> server-> user.service.ts
The above Angular 5 services file looks like Angular 5 components ,but the main difference is it uses the @injectable decorator .
Because of @injectable decorator ,you can import the Angular 5 services into other Angular component of application and access the properties of the services
created a string arrays to store names , according user services the name of the string array is users
create a method to return first name of the user array
Import services in app.module
On Each time of services creation in angular application you need to added in provider array in app.module.ts file of the one of the app component file
Consume Angular 5 services in Components
Import services in componentone and componenttwo file to consume services methods as showed bellow.
Crate one string variable to capture the value of the services methods ,according to user services you have only one method. The service method will be return fist name of user array
Sample mark up to consume services date in Componentone.html & componenttwo.html file
Bootstrap those two components in app.component.html File As shown below
Learn Angular 5 Step by Step
Angular 5 Flow-Chart ,The Entry point of any Angular js application is main.js form main.ts file the control will be moving to app.module.ts. How the control is moved form main.ts to app.module.ts bcz of the Angular CLI was import the app module and bootstrap that module.
Angular 5 Components like What is Component?, What is the use of the component?, How you can use these components in Angular Application.Components are basic building block of an angular js application ,each and every component must be belongs to @node module in order to access for another component in Application
Tow way Binding Data binding is a communication in between type script code of the component and templateURL of the component ,to render sample markup on web browser .if you want to render sample html of the component then you used string interpolation
Directive are will be giving instructions to DOM ,how to render text on web browser. With help of directives you can manipulate the DOM Elements. Components are one type of Directives
Thanks For Reading this article ,like and share this post