@Component({
...
template: '<p #bio></p>'
})
export class UserDetailsComponent {
@ViewChild('bio') bio;
}
<p> टैग के लिए ElementRef ऑब्जेक्ट तक पहुंच प्रदान करता है जिसमें कंपोनेंट के टेम्पलेट व्यू में bio टेम्पलेट संदर्भ चर है।<p> टैग को पैरेंट व्यू के चाइल्ड के रूप में रेंडर किया गया है जो इस कंपोनेंट का उपयोग करता है।<p> टैग को कंटेंट प्रोजेक्शन का समर्थन करता है।<p> टैग को दृश्यमान बनाता है। यदि #bio का उपयोग टेम्पलेट में किया गया था और @ViewChild का उपयोग क्लास में नहीं किया गया था, तो Angular स्वचालित रूप से <p> टैग को छुपा देगा जिस पर #bio है।<form> एलिमेंट पर controls नामक एट्रिब्यूट में जोड़ें ताकि यह संकेत मिल सके कि इसमें कौन से फ़ील्ड शामिल होने चाहिए।ActivatedRoute क्लास पर paramMap और queryParamMap में क्या अंतर है?<h2>नाम</h2>
<div *ngFor="let user of users | async"></div>
<h2>उम्र</h2>
<div *ngFor="let user of users | async"></div>
<h2>लिंग</h2>
<div *ngFor="let user of users | async"></div>
export class OrderService {
constructor(private httpClient: HttpClient) {}
addOrder(order: Order) {
// लापता लाइन
}
}
this.httpClient.url(this.orderUrl).post(order);this.httpClient.send(this.orderUrl, order);this.httpClient.post<Order>(this.orderUrl, order);this.httpClient.post<Order>(this.orderUrl, order).subscribe();@Component({
selector: 'app-user-card',
. . .
})
<div app-user-card></div>।<app-user-card></app-user-card> का पहला इंस्टेंस।<app-user-card></app-user-card> के सभी इंस्टेंस।<user-card></user-card> के सभी इंस्टेंस।A
<ul>
<li [ngFor]="let productName of productNames"></li>
</ul>
B
<ul>
<li ngFor="let productName of productNames"></li>
</ul>
C
<ul>
<li *ngFor="let productName of productNames"></li>
</ul>
D
<ul>
<? for productName in productNames { ?>
<li></li>
<? } ?>
</ul>
@Component({
selector: 'app-title-card',
template: '',
})
class TitleCardComponent {
title = 'User Data';
}
title[title]<a> टैग को लिंक करने के लिए किस डायरेक्टिव का उपयोग किया जाता है?@Component({
selector: 'app-shopping-cart',
. . .
})
export class ShoppingCartComponent {
@Output() itemTotalChanged = new EventEmitter();
}
itemTotalChanged क्लास फ़ील्ड को सार्वजनिक बनाता है।itemTotalChanged क्लास फ़ील्ड में मानों को बाइंड करने का एक तरीका प्रदान करता है, जैसे: <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>।itemTotalChanged क्लास फ़ील्ड में इवेंट्स को बाइंड करने का एक तरीका प्रदान करता है, जैसे: <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>।<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>
ngIf दूसरे उदाहरण के लिए शॉर्टहैंड है। जब Angular उस डायरेक्टिव को प्रोसेस करता है, तो यह hidden प्रॉपर्टी के साथ DOM में एक div एलिमेंट लिखता है।ngIf डायरेक्टिव DOM में div को रेंडर नहीं करता है यदि एक्सप्रेशन false है। hidden प्रॉपर्टी उपयोग ब्राउज़र व्यूपोर्ट में div सामग्री को छुपाता है, लेकिन div अभी भी DOM में है।ngIf मान्य है, लेकिन hidden प्रॉपर्टी का उपयोग गलत है और एक त्रुटि फेंक देगा।<form #userForm="ngForm">
<input type="text" ngModel name="firstName" required />
<input type="text" ngModel name="lastName" required />
<button (click)="submit(userForm.value)">Save</button>
</form>
A
<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
B
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
C
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
D
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>
@Component({
selector: 'app-title-card',
template: '<h1 title="User Data"> </h1>',
})
export class TitleCardComponent {
titleText = 'User Data';
}
<h1 data-title="titleText"></h1><h1 title="titleText"></h1><h1 [title]="titleText"></h1><h1 titleText></h1><span>Boss: </span>
{ path: 'user/:id', component: UserDetailComponent }{ url: 'user/:id', routedComponent: UserDetailComponent }{ routedPath: 'user/:id', component: UserDetailComponent }{ destination: new UserDetailComponent(), route: 'user/:id' }@Directive({
selector: '[appCallout]',
})
export class CalloutDirective {
@HostBinding('style.font-weight') fontWeight = 'normal';
@HostListener('mouseenter')
onMouseEnter() {
this.fontWeight = 'bold';
}
@HostListener('mouseleave')
onMouseLeave() {
this.fontWeight = 'normal';
}
}
<input type="text" ngModel name="firstName" required minlength="4" />
<span *ngIf="">Invalid field data</span>
<h1 #headerText>User List</h1>
<h1> एलिमेंट का आंतरिक टेक्स्ट[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];
{
path: 'customers',
component: CustomerListComponent,
data: { accountSection: true }
}
ngIf स्ट्रक्चरल डायरेक्टिव इस टेम्पलेट सिंटैक्स के आधार पर रेंडर किए गए DOM को कैसे बदलता है?@Component({
selector: 'app-product',
template: '<div *ngIf="product"></div>',
})
export class ProductComponent {
@Input() product;
}
<div> एक प्लेसहोल्डर के रूप में कार्य करता है। यदि product क्लास फ़ील्ड “truthy” है, तो <div> को केवल product.name मान से बदल दिया जाएगा; यदि नहीं, तो कुछ भी रेंडर नहीं होगा।<div> हमेशा रेंडर होगा, और यदि product फ़ील्ड “truthy” है, तो <div> एलिमेंट में product.name मान होगा; अन्यथा, यह बिना किसी मान के <div> एलिमेंट को रेंडर करेगा।product.name फ़ील्ड के मान के साथ <div> शामिल होगा। यदि यह “truthy” नहीं है, तो रेंडर किए गए DOM में <div> एलिमेंट नहीं होगा।@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
{
path: ':id',
component: UserComponent,
resolve: {
user: UserResolverService
}
}
@Component({
. . .
template: '<ng-content></ng-content>'
})
export class TabsListComponent {
@ContentChildren(TabComponent) tabs;
}
<ng-content> एलिमेंट में डाल दिए जाएंगे।<ng-content> में content projected थे।fixture.detectChanges() कॉल का उद्देश्य क्या है?TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
fixture.componentInstance.title,
);
Router.navigate विधि की निम्नलिखित कॉल के आधार पर URL सेगमेंट कैसा दिखेगा?export class ToolsComponent {
constructor(private router: Router) {}
goToUser(id: number) {
this.router.navigate(['user', id]);
}
}
@Directive({
selector: ' [appHighlight] ',
})
export class HighlightDirective {
@HostBinding('class.highlighted') highlight = true;
}
<form> एलिमेंट पर इसे वायर करने के लिए किस Angular फॉर्म क्लास प्रकार का उपयोग किया जाता है?FormArrayFormControlFormGroupइन सभी उत्तरों<form [formGroup]="form">
<input type="text" formControlName="username" />
...
</form>
A
<span *ngIf="username.minLength.invalid"> Username length is not valid </span>
B
<input type="text" formControlName="username" [showMinLength]="true" />
C
<span *ngIf="form.get('username').getError('minLength') as minLengthError">
Username must be at least characters.
</span>
D
<input type="text" formControlName="username" #userName="ngModel" />
<span *ngIf="userName.errors.minlength">
Username must be at least characters.
</span>
TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.componentTemplatefixture.getComponentHtml()fixture.nativeElementfixture.componentInstance.template@Component({
selector: 'app-card',
template: '<h1>Data Card</h1><ng-content></ng-content>'
})
export class CardComponent { }
@Component({
selector: 'app-bio',
template: '<ng-content></ng-content>.
})
export class BioComponent { }
// मार्कअप उपयोग:
<app-card><app-bio>Been around for four years.</app-bio></app-card>
A
<app-card>
<h1>Data Card</hl>
<app-bio>
Been around for four years.
</app-bio>
</app-card>
B
<h1>Data Card</h1>
<app-bio> Been around for four years. </app-bio>
C
<app-card>
<h1>Data Card</hl>
<ng-content></ng-content>
<app-bio>
Been around for four years.
<ng-content></ng-content>
</app-bio>
</app-card>
D
<app-card>
<h1>Data Card</hl>
</app-card>
@Component({
selector: 'app-user-card',
template: '<app-title-card></app-title-card><p>Jenny Smith</p>'
})
@Component({
selector: 'app-title-card',
template: '<h1>User Data</hl>'
})
// पैरेंट कंपोनेंट html में user card कंपोनेंट का उपयोग
<app-user-card></app-user-card>
A
<app-user-card>
<app-title-card>
<h1>User Data</h1>
</app-title-card>
<p>Jenny Smith</p>
</app-user-card>
B
<h1>User Data</h1>
<p>Jenny Smith</p>
<p></p>
C
<app-user-card>
<app-title-card></app-title-card>
</app-user-card>
D
<div app-user-card>
<h1 app-title-card>User Data</h1>
<p>Jenny Smith</p>
</div>
constructor(@Inject('Logger') private logger) { }
A
providers: [Logger];
B
providers: [{ provide: 'Logger', useClass: Logger }];
C
@Injectable({
providedln: 'root'
})
D
providers: [{ provide: 'Logger' }];
export class SettingsService {
constructor(private httpClient: HttpClient) { }
...
getSettings()
{
return this.httpClient.get<Settings>(this.settingsUrl)
.pipe(
retry(3)
);
}}
getSettings के लिए एक कॉल get क्वेरी को निष्पादित करेगी। retry ऑपरेटर का उपयोग pipe कॉल को get क्वेरी को तीन बार retry करने के लिए किया जाता है।Httpclient.get कॉल से उपलब्ध नहीं है।const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);
@Directive({
selector: '[appTruncate]'
})
export class TruncateDirective {
. . .
}
// वांछित उपयोग का उदाहरण:
<p [appTruncate]="10">Some very long text here</p>
@Input() appTruncate: number;@Output() appTruncate;constructor(maxLength: number) { }कुछ नहीं। डायरेक्टिव सिलेक्टर का उपयोग डायरेक्टिव में मान पास करने के लिए नहीं किया जा सकता है।HttpClient.get अनुरोध में क्वेरी पैरामीटर कैसे पास कर सकते हैं?export class OrderService {
constructor(private httpClient: HttpClient) {}
getOrdersByYear(year: number): Observable<Order[]> {
return this.httpClient.get<Order[]>(this.ordersUrl);
}
}
return this.httpClient.get<Order[]>(this.ordersUrl, {'year': year})return this.httpClient.get<Order[]>(this.ordersUrl, year)C
const options = { params: new HttpParams().set('year', year) };
return this.httpClient.get<Order[]>(this.ordersUrl, options);
D
getOrdersByYear(year: number): Observable<Order[]> {
return this.httpClient.addParam('year', year).get<Order[]>(this.ordersUrl, year);
}
DataService को एप्लिकेशन के लिए प्रोवाइडर में पंजीकृत किया गया है, इस कंपोनेंट के constructor के आधार पर क्या होता है इसका सर्वोत्तम विवरण कौन सा है?@Component({
...
})
export class OrderHistoryComponent {
constructor(private dataService: DataService) {}
...
}
OrderHistoryComponent का DataService का अपना संस्करण होगा और इसे कभी भी किसी मौजूदा इंस्टेंस का उपयोग नहीं करना चाहिए। इस कोड को पूर्ण और कार्यशील होने के लिए DataService को क्लास के भीतर एक private फ़ील्ड के रूप में instantiate करने की आवश्यकता होगी।OrderHistoryComponent का एक नया इंस्टेंस बनाता है, तो injector कंपोनेंट constructor के पहले तर्क में DataService क्लास का एक इंस्टेंस प्रदान करेगा। constructor का dataService पैरामीटर इंस्टेंस पर समान नाम के साथ एक private इंस्टेंस फ़ील्ड सेट करने के लिए उपयोग किया जाएगा।dataService नामक एक कस्टम प्रॉपर्टी रखने में सक्षम बनाता है जिसका उपयोग मौजूदा DataService इंस्टेंस को बाइंड करने के लिए किया जा सकता है।ngIf डायरेक्टिव का उपयोग करके इस मार्कअप को पूरा करें ताकि एक else केस लागू किया जा सके जो “User is not active” टेक्स्ट प्रदर्शित करेगा:<div *ngIf="userIsActive; else inactive">Currently active!</div>
A
<div #inactive>User is not active.</div>
B
<div *ngIf="inactive">User is not active.</div>
C
<ng-template #else="inactive">
<div>User is not active.</div>
</ng-template>
D
<ng-template #inactive>
<div>User is not active.</div>
</ng-template>
A
{
path: 'users',
lazy: './users/users.module#UsersModule'
}
B
{
path: 'users',
loadChildren: () => import('./users/users.module').then(m => m.UserModule)
}
C
{
path: 'users',
loadChildren: './users/users.module#UsersModule'
}
D
{
path: 'users',
module: UsersModule
}
export class UserFormControl implements OnInit {
...
ngOnInit() {
this.form = this.formBuilder.group({
username: this.formBuilder.control('',
[Validators.required, Validators.minLength(5), this.unique]),
)};
}
unique(control: FormControl) {
return control.value !== 'admin' ? null: {notUnique: true};
}
}
username के लिए FormControl उन तीन validators को बाहर करने के लिए कॉन्फ़िगर हो रहा है जो इसे उपयोग करने की अनुमति है।username के लिए FormControl तीन संभावित validators का उपयोग करने की अनुमति देने के लिए कॉन्फ़िगर हो रहा है: required, maxLength, और unique नामक एक कस्टम। इन validators को सक्षम करने के लिए, मार्कअप में फॉर्म फ़ील्ड पर एक validator डायरेक्टिव रखना होगा।username के लिए FormControl तीन validators के साथ कॉन्फ़िगर हो रहा है: Angular से आने वाले required और minLength validators, और unique नामक एक कस्टम validator फ़ंक्शन जो मान की जांच करता है कि यह string admin के बराबर नहीं है।@Injectable({
providedIn: 'root'
)}
export class DataService { }
export interface AppSettings {
title: string;
version: number;
}
export const APP_SETTINGS = new InjectionToken<AppSettings>('app.settings');
<form #form="ngForm">
<input type="text" ngModel="firstName" /> <input type="text" ngModel="lastName" />
<button (click)="submit()">Save</button>
</form>
prelodingStrategy प्रॉपर्टी कॉन्फ़िगरेशन का उद्देश्य क्या है?RouterModule.forRoot(
...{
preloadingStrategy: PreloadAllModules,
},
);
userName के मान को h1 एलिमेंट title प्रॉपर्टी से बाइंड किया जा सके?<h1 [title]="userName">Current user is </h1>
title="userName"title=""title="userName"async पाइप क्या कर रहा है?@Component({
selector: 'app-users',
template: '<div *ngFor="let user of users | async"></div>',
})
export class UsersComponent implements OnInit {
users;
constructor(private httpClient: HttpClient) {}
ngOnInit(): void {
this.users = this.httpClient.get<{ name: string }>('users');
}
}
ngFor statement में नहीं किया जा सकता है।ngFor iteration को एक साथ कई उपयोगकर्ताओं की सूचियों का समर्थन करने के लिए कॉन्फ़िगर कर रहा है।HttpClient.get विधि से लौटाए गए observable की सदस्यता ले रहा है और लौटाए गए मान को unwrap कर रहा है ताकि इसे ngFor में iterate किया जा सके।users फ़ील्ड में सभी उपयोगकर्ताओं को DOM में एक साथ render होने की अनुमति दे रहा है।@Directive({ selector: '[appTruncate]'
})
export class TruncateDirective{ . . .
}
html <p data-directive="appTruncate">Some long text </p>html <p appTruncate>Some long text</p>html <p app-truncate>Some long text</p>html <app-truncate>Some long text</app-truncate>@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
transform(value: string, maxLength: number, showEllipsis: boolean) {
const newValue = maxLength ? value.substr(0, maxLength) : value;
return showEllipsis ? '${newValue}...' : newValue;
}
}
some lo...some ltruesome long text<div *ngIf="location">
<h1></h1>
<p></p>
</div>
A
<div *ngIf="location">
<h1></h1>
<p></p>
</div>
B
<ng-template *ngIf="location">
<h1></h1>
<p></p>
</ng-template>
C
<div *ngIf="location" [display]=" ' hidden' ">
<h1></h1>
<p></p>
</div>
D
<ng-container *ngIf="location">
<h1></h1>
<p></p>
</ng-container>
<div class="tab"></div>
[width]="tabWidth"[inline.width]="tabWidth"[style.width.px]="tabWidth"<div *ngFor="let item of items"> - </div>
*ngFor="let item of items; let uniqueItem"*ngFor="let item of items.distinct()"*ngFor="let item of items: let i = index"*ngFor="let item of items; trackBy: trackById"ng build --configuration=production --progress=false
@Component({ selector:'app-product-name', ...
})
export class ProductNameComponent { @Input() productName: string
}
<input type='text' id='productName'> Dom एलिमेंट जेनरेट करता है।useValue provider कॉन्फ़िगरेशन का उपयोग करें और इसे एक मौजूदा ऑब्जेक्ट या एक ऑब्जेक्ट literal के बराबर सेट करें।asValue provider कॉन्फ़िगरेशन प्रॉपर्टी का उपयोग करें, इसे true पर सेट करें।{path: 'user/:id', component: UserDetailComponent }
<form [formGroup]="form">
<input type="text" formControlName="username" />
<button type="submit" [disabled]="form.invalid">Submit</button>
</form>
<button> एलिमेंट में (click)=”onSubmit()” जोड़ें।<form> एलिमेंट में (ngSubmit )=”onSubmit()” जोड़ें।<div [ngClass]="{ 'active-item': isActive }">Item One</div>
<div active-item>Item One</div><div class="active-item">Item One</div><div class="is-active">Item One</div><div class="active-item isActive">Item One</div><input [(ngModel)]="user.name" />
@NgModule({ exports: [TableModule] }) export class SharedModule {}
@NgModule({ imports: [TableModule] }) export class SharedModule {}
@NgModule({ declarations: [TableModule] }) export class SharedModule {}
@NgModule({ providers: [TableModule] }) export class SharedModule {}
<span [ngClass]="{ 'active': isActive, 'can-toggle': canToggle }"> Employed </span>
A
<span class=" ">
Employed
</span>
B
<span [class.active]="isActive" [class.can-toggle]="canToggle"> Employed </span>
C
<span [styles.class.active]="isActive" [styles.class.can-toggle]="canToggle"> Employed </span>
D
<span [css.class.active]="isActive" [css.class.can-toggle]="canToggle"> Employed </span>
@Directive({
selector: '[customValidator]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: CustomValidatorDirective,
multi: true,
},
],
})
export class CustomValidatorDirective implements Validator {}
@Component({
selector: 'app-date-card',
template: '',
})
export class DateCardComponent {
currentYear() {
return new Date().getFullYear();
}
}
@Component({
selector: 'app-user-card',
. . .
})
export class UserCardComponent {
@ViewChild('bio') bio;
}
<p> टैग के लिए ElementRef ऑब्जेक्ट तक पहुंच प्रदान करता है जिसमें कंपोनेंट के टेम्पलेट व्यू में bio टेम्पलेट संदर्भ चर है।<p> टैग को पैरेंट व्यू के चाइल्ड के रूप में रेंडर किया गया है जो इस कंपोनेंट का उपयोग करता है।<p> टैग को कंटेंट प्रोजेक्शन का समर्थन करता है।<p> टैग को दृश्यमान बनाता है। यदि #bio का उपयोग टेम्पलेट में किया गया था और @ViewChild का उपयोग क्लास में नहीं किया गया था, तो Angular स्वचालित रूप से <p> टैग को छुपा देगा जिस पर #bio है।यह Angular प्रश्नोत्तरी का हिंदी अनुवाद है। सभी 83 प्रश्न और उनके विकल्प अनुवादित हैं।