未加星标

Sharing Data Between Components In Angular

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Introduction

In this article, we are going learn how to share data between the components. Sometimes we want the data from one component to be sent from one component to another to perform a certain operation. The data can be sent in two ways,

Parent component to child component. Child component to parent component. prerequisites HTML, CSS and JS Basics of Typescript. Components

Let us create a sample TestApp. For this you should have installed the below for the development environment,

Node Npm (comes when you install node) Angular CLi. Text Editor.

For creating a new application run the below command on your location.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'.

Note

See my previous article “ Getting started with Angular CLI .” If you want the installation and introduction from the basics, start with the execution of sample application.

We will create a TestApp and we will have an AppComponent as a parent component and we will create a testComponent which we will treat as a child component.

Let us start the sharing of simple data from one component to another and achieve the component interaction functionality in Angular.

Sharing of data between components is possible via ‘Input’ and ‘Output’ decorator.

Input decorator

The input decorator ‘@Input()’ is used to send the data from parent component to the child component.

Output decorator

The output decorator ‘@Output()’ is used to send data from the child component to parent component.

Sharing of data from parent to child component.

Open app.component.ts and add the below contents,

import{Component}from'@angular/core'; @Component({ selector:'app-root', templateUrl:'./app.component.html', styleUrls:['./app.component.css'] }) exportclassAppComponent{ publicparentProp="Parentdatavalue"; title='TestApp'; }

We have added a property ‘parentProp’ and we will send this property value to child component; i.e test component.

Open app.component.html and add the below contents,

<divstyle="text-align:center"> <h1> Welcometo{{title}}! </h1> <app-test[parentObj]="parentProp"></app-test> </div>

We have used the selector tag of child component <app-test> inside app component. There we will pass the property value by assigning it to some name, say ‘parentObj’. This named property ‘parentObj’ will be used in child component as input property.

Open test.component.ts and add the below contents,

import{Component,OnInit,Input}from'@angular/core'; @Component({ selector:'app-test', templateUrl:'./test.component.html', styleUrls:['./test.component.css'] }) exportclassTestComponentimplementsOnInit{ @Input()publicparentObj="second"; constructor(){} ngOnInit(){ } }

Open test.component.html and add the below contents,

<h2>ThisisChildcomponent.i.eTestcomponent!</h2> <h3>Datafromparentcomponent-{{parentObj}}</h3>

Run the application,


Sharing Data Between Components In Angular
Name aliasing

If we want the property name to be different in component then we can use aliasing of property.

Eg: @Input (‘parentObj’) public prop1;

Now, in our HTML template, we will use prop1 that will work the same as that of the above example for accessing parent data.

<h2>ThisisChildcomponent.i.eTestcomponent!</h2> <h3>Datafromparentcomponent-{{prop1}}</h3>

Sharing of data from child to parent component

The sharing of data from parent component to the child is pretty easy because we are already having the child component selector used inside it. But in case of sharing of data from child component to parent, it is not sending in the same way. The way in which data is sent from child to parent is via ‘event’.

Let us define a simple property called ‘childProp’ and display its content to the parent component; i.e app component.

Open test.component.ts and add the below contents.

import{Component,OnInit,Input,Output,EventEmitter}from'@angular/core'; @Component({ selector:'app-test', templateUrl:'./test.component.html', styleUrls:['./test.component.css'] }) exportclassTestComponentimplementsOnInit{ @Input()publicparentObj="second"; @Output()publicchildComponentEvent=newEventEmitter(); sendData(){ this.childComponentEvent.emit('ChildComponentdata'); } constructor(){ } ngOnInit(){ } }

Import EventEmitter from @angular/core.

To send this ‘childComponentEvent’ to the parent component we use ‘output’ decorator.

We will use some method to emit the data from the child component to the parent component.

Open test.compnent.html and add the below contents.

<h2>ThisisChildcomponent.i.eTestcomponent!</h2> <h3>Datafromparentcomponent-{{parentObj}}</h3> <button(click)="sendData()">Sendtoparent</button>

We are sending data to parent component via click event.

Open app.component.html and add the below contents

<divstyle="text-align:center"> <h1> Welcometo{{title}}! </h1> <app-test(childComponentEvent)="childData=$event"[parentObj]="parentProp"></app-test> </div>

We are taking the value in property ‘childData’ so we have to declare it in the component class. $event is the value that is being emitted from child component event.

Declare this property in parent component; i.e. in app.component.ts

import{Component}from'@angular/core'; @Component({ selector:'app-root', templateUrl:'./app.component.html', styleUrls:['./app.component.css'] }) exportclassAppComponent{ publicparentProp="Parentdatavalue"; publicchildData=""; title='TestApp'; }

Run the application,


Sharing Data Between Components In Angular

Click on ‘button’


Sharing Data Between Components In Angular

That’s all about component interaction with the help of sharing of data from one component to another.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Sharing Data Between Components In Angular
本站链接:https://www.codesec.net/view/610664.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(48)