కోణీయంగా అవుట్‌పుట్ డెకరేటర్‌ను ఎలా ఉపయోగించాలి

మీలాంటి పాఠకులు MUOకి మద్దతు ఇవ్వడానికి సహాయం చేస్తారు. మీరు మా సైట్‌లోని లింక్‌లను ఉపయోగించి కొనుగోలు చేసినప్పుడు, మేము అనుబంధ కమీషన్‌ను సంపాదించవచ్చు. ఇంకా చదవండి.

కోణీయ భాషలో, వెబ్ పేజీ అనేక రకాల పునర్వినియోగ భాగాలను కలిగి ఉంటుంది. ప్రతి భాగం సాధారణంగా దాని స్వంత టైప్‌స్క్రిప్ట్ లాజిక్, HTML టెంప్లేట్ మరియు CSS స్టైలింగ్‌ను కలిగి ఉంటుంది.

లేకుండా స్నాప్‌చాట్‌లో స్క్రీన్ షాట్ ఎలా తీయాలి

మీరు ఇతర భాగాలలో భాగాలను కూడా తిరిగి ఉపయోగించవచ్చు. ఈ సందర్భంలో, మీరు చైల్డ్ కాంపోనెంట్ నుండి సమాచారాన్ని తిరిగి దాని పేరెంట్ కాంపోనెంట్‌కి పంపడానికి అవుట్‌పుట్ డెకరేటర్‌ని ఉపయోగించవచ్చు.

చైల్డ్ కాంపోనెంట్‌లో జరిగే ఈవెంట్‌లను వినడానికి మీరు అవుట్‌పుట్ డెకరేటర్‌ని కూడా ఉపయోగించవచ్చు.

చైల్డ్ కాంపోనెంట్‌కి అవుట్‌పుట్ డెకరేటర్‌ను ఎలా జోడించాలి

ముందుగా, మీరు పేరెంట్ కాంపోనెంట్ మరియు చైల్డ్ కాంపోనెంట్‌తో కొత్త కోణీయ యాప్‌ని సృష్టించాలి.

మీరు పేరెంట్ మరియు చైల్డ్ కాంపోనెంట్‌ను కలిగి ఉన్న తర్వాత, మీరు డేటాను బదిలీ చేయడానికి మరియు రెండు భాగాల మధ్య ఈవెంట్‌లను వినడానికి అవుట్‌పుట్ డెకరేటర్‌ని ఉపయోగించవచ్చు.

కొత్తదాన్ని సృష్టించండి కోణీయ అప్లికేషన్ . డిఫాల్ట్‌గా, 'యాప్' అనేది రూట్ కాంపోనెంట్ పేరు. ఈ భాగం మూడు ప్రధాన ఫైల్‌లను కలిగి ఉంటుంది: 'app.component.html', 'app.component.css' మరియు 'app.component.ts'.
ఈ ఉదాహరణ కోసం, 'యాప్' భాగం పేరెంట్ కాంపోనెంట్‌గా పని చేస్తుంది. 'app.component.html'లోని మొత్తం కంటెంట్‌ని కింది వాటితో భర్తీ చేయండి:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```
'app.component.css'లో పేరెంట్ యాప్ కాంపోనెంట్‌కి కొంత స్టైలింగ్‌ని జోడించండి:
```
 .parent-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightcoral; 
  padding: 20px 
}
```
దీనికి 'ng generate component' ఆదేశాన్ని ఉపయోగించండి కొత్త కోణీయ భాగాన్ని సృష్టించండి 'డేటా-కాంపోనెంట్' అని పిలుస్తారు. ఈ ఉదాహరణలో, 'డేటా-కాంపోనెంట్' చైల్డ్ కాంపోనెంట్‌ను సూచిస్తుంది.
```
 ng g c data-component
```
'data-component.component.html'లో చైల్డ్ కాంపోనెంట్‌కు కంటెంట్‌ని జోడించండి. కొత్త బటన్‌ను జోడించడానికి ప్రస్తుత కంటెంట్‌ను భర్తీ చేయండి. వినియోగదారు దానిపై క్లిక్ చేసినప్పుడు అమలు చేసే ఫంక్షన్‌కు బటన్‌ను బంధించండి:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

'data-component.component.css'లో చైల్డ్ కాంపోనెంట్‌కి కొంత స్టైలింగ్‌ని జోడించండి:

 .child-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightblue; 
  margin: 20px; 
  padding: 20px 
}

'data-component.component.ts'లో కాంపోనెంట్ కోసం టైప్‌స్క్రిప్ట్ ఫైల్‌కు onButtonClick() ఫంక్షన్‌ని జోడించండి:
```
 onButtonClick() { 
}
```
ఇప్పటికీ టైప్‌స్క్రిప్ట్ ఫైల్ లోపల, దిగుమతుల జాబితాకు 'అవుట్‌పుట్' మరియు 'ఈవెంట్‌మిటర్' జోడించండి:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
DataComponentComponent తరగతి లోపల, 'buttonWasClicked' అనే కాంపోనెంట్ కోసం అవుట్‌పుట్ వేరియబుల్‌ను ప్రకటించండి. ఇది EventEmitter అవుతుంది. EventEmitter అనేది ఈవెంట్ జరిగినప్పుడు మరొక భాగాన్ని తెలియజేయడానికి మిమ్మల్ని అనుమతించే అంతర్నిర్మిత తరగతి.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
onButtonClick() ఫంక్షన్ లోపల 'buttonWasClicked' ఈవెంట్ ఉద్గారిణిని ఉపయోగించండి. వినియోగదారు బటన్‌పై క్లిక్ చేసినప్పుడు, డేటా-భాగం ఈ ఈవెంట్‌ను పేరెంట్ యాప్ కాంపోనెంట్‌కి పంపుతుంది.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

పేరెంట్ కాంపోనెంట్ నుండి చైల్డ్ కాంపోనెంట్‌లోని ఈవెంట్‌లను ఎలా వినాలి

చైల్డ్ కాంపోనెంట్ యొక్క అవుట్‌పుట్ ప్రాపర్టీని ఉపయోగించడానికి, మీరు పేరెంట్ కాంపోనెంట్ నుండి విడుదలయ్యే ఈవెంట్‌ను వినాలి.

నెట్‌ఫ్లిక్స్ ప్రస్తుతం ఈ శీర్షికను ప్లే చేయడంలో మాకు సమస్య ఉంది

'app.component.html' లోపల చైల్డ్ కాంపోనెంట్‌ని ఉపయోగించండి. HTML ట్యాగ్‌ని సృష్టించేటప్పుడు మీరు 'బటన్‌వాస్‌క్లిక్డ్' అవుట్‌పుట్‌ను ప్రాపర్టీగా జోడించవచ్చు. ఈవెంట్‌ను కొత్త ఫంక్షన్‌కి బంధించండి.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
'app.component.ts' లోపల, చైల్డ్ కాంపోనెంట్‌లో బటన్ క్లిక్ ఈవెంట్ సంభవించినప్పుడు దాన్ని నిర్వహించడానికి కొత్త ఫంక్షన్‌ను జోడించండి. వినియోగదారు బటన్‌పై క్లిక్ చేసినప్పుడు సందేశాన్ని సృష్టించండి.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
సందేశాన్ని 'app.component.html'లో ప్రదర్శించండి:
```
 <p>{{message}}</p>
```
మీ కోణీయ అప్లికేషన్‌ను అమలు చేయడానికి టెర్మినల్‌లో 'ng serve' ఆదేశాన్ని టైప్ చేయండి. దీన్ని స్థానిక హోస్ట్:4200 వద్ద వెబ్ బ్రౌజర్‌లో తెరవండి. పేరెంట్ మరియు చైల్డ్ కాంపోనెంట్‌లు వాటి మధ్య తేడాను సులభంగా గుర్తించడానికి విభిన్న నేపథ్య రంగులను ఉపయోగిస్తాయి.
పై క్లిక్ చేయండి నన్ను క్లిక్ చెయ్యి బటన్. చైల్డ్ కాంపోనెంట్ ఈవెంట్‌ను పేరెంట్ కాంపోనెంట్‌కు పంపుతుంది, అది సందేశాన్ని ప్రదర్శిస్తుంది.

చైల్డ్ కాంపోనెంట్ నుండి పేరెంట్ కాంపోనెంట్‌కి డేటాను ఎలా పంపాలి

మీరు చైల్డ్ కాంపోనెంట్ నుండి పేరెంట్ కాంపోనెంట్‌కి డేటాను కూడా పంపవచ్చు.

'data-component.component.ts'లో, కొంత డేటాను కలిగి ఉన్న స్ట్రింగ్‌ల జాబితాను నిల్వ చేయడానికి వేరియబుల్‌ని జోడించండి.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
బటన్ యొక్క రిటర్న్ రకాన్ని సవరించండిWasClicked ఈవెంట్ ఉద్గారిణి. మునుపటి దశలో మీరు ప్రకటించిన స్ట్రింగ్‌ల జాబితాతో సరిపోలడానికి దీన్ని శూన్యం నుండి స్ట్రింగ్‌కి మార్చండి[]:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
onButtonClick() ఫంక్షన్‌ని సవరించండి. ఈవెంట్‌ను పేరెంట్ కాంపోనెంట్‌కి పంపుతున్నప్పుడు, డేటాను ఎమిట్() ఫంక్షన్‌లో ఆర్గ్యుమెంట్‌గా జోడించండి:
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
'app.component.html'లో, 'app-data-component' ట్యాగ్‌ని సవరించండి. బటన్InChildComponentWasClicked() ఫంక్షన్‌లో '$ఈవెంట్'ని జోడించండి. ఇది పిల్లల భాగం నుండి పంపబడిన డేటాను కలిగి ఉంటుంది.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```
డేటా కోసం పరామితిని జోడించడానికి 'app.component.ts'లో ఫంక్షన్‌ను నవీకరించండి:
```
 buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
}
```

చైల్డ్ కాంపోనెంట్ నుండి వచ్చే డేటాను స్టోర్ చేయడానికి 'డేటా' అనే కొత్త వేరియబుల్‌ని జోడించండి:

 message: string = "" 
data: string[] = [] 
 
buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
    this.data = dataFromChild; 
}

HTML పేజీలో డేటాను ప్రదర్శించండి:
```
 <p>{{data.join(', ')}}</p>
```
మీ కోణీయ అప్లికేషన్‌ను అమలు చేయడానికి టెర్మినల్‌లో 'ng serve' ఆదేశాన్ని టైప్ చేయండి. దీన్ని స్థానిక హోస్ట్:4200 వద్ద వెబ్ బ్రౌజర్‌లో తెరవండి.
పై క్లిక్ చేయండి నన్ను క్లిక్ చెయ్యి బటన్. చైల్డ్ కాంపోనెంట్ డేటాను చైల్డ్ కాంపోనెంట్ నుండి పేరెంట్ కాంపోనెంట్‌కి పంపుతుంది.

అవుట్‌పుట్ డెకరేటర్‌ని ఉపయోగించి ఇతర భాగాలకు డేటాను పంపడం

ఇన్‌పుట్ డెకరేటర్ లేదా కాంపోనెంట్ డెకరేటర్ వంటి ఇతర డెకరేటర్‌లు మీరు కోణీయంగా ఉపయోగించవచ్చు. మీరు మీ కోడ్‌ను సులభతరం చేయడానికి కోణీయలో ఇతర డెకరేటర్‌లను ఎలా ఉపయోగించవచ్చనే దాని గురించి మరింత తెలుసుకోవచ్చు.