ThisfilecontainsanumberofAngularinterviewquestionsthatcanbeusedwhenvettingpotentialcandidates.Itisbynomeansrecommendedtouseeverysinglequestionhereonthesamecandidate(thatwouldtakehours).Choosingafewitemsfromthislistshouldhelpyouvettheintendedskillsyourequire.
AdeveloperisperfectlyabletouseAngulartobuildapplicationswithoutbeingabletoanswerallofthesequestions.Additiontohavingasourceforinterviewquestions,myintentionistoencourageinteresteddeveloperstothinkaboutthesequestions.IregularlyteachAngularworkshops.OftentimesIdonotgetenoughquestionsduetolimitedexposureworkingwiththeframework.ThesequestionsaretheonesIpersonallyneededtoanswer,tobeableleadateamdevelopingourfirstAngularproductionapplicationatAutodeskA360.
Note:Keepinmindthatmanyofthesequestionsareopen-endedandcouldleadtointerestingdiscussionsthattellyoumoreabouttheperson'scapabilitiesthanastraightanswerwould.
TableofContentsAnimationsQuestionsArchitectureQuestionsAPIQuestionsTemplateQuestionsComponentQuestionsComponentInteraction&StateManagementQuestionsFormsQuestionsGeneralQuestionsNgModulesQuestionsObservablesRxJSQuestionsPerformanceQuestionsPipesQuestionsRouterQuestionsServicesQuestionsStructuralDirectivesQuestionsStylingQuestionsStyleGuideQuestionsTestingQuestionsTypeScriptQuestionsJavaScriptQuestionsCodingQuestionsFunQuestionsGeneralQuestions:WhatdidyoulearnaboutAngularyesterday/thisweek?WhataresomeofthereasonsyouwouldchoosetouseAngularinyourproject?WhatdidyoulikeaboutworkingwithAngular?HowdoyoukeepyourAngularcodemorereadableandmaintainable?WhatdoestestablecodemeantoyouincontextofAngular?WhatdoesreusablecodemeantoyouincontextofAngular?AnimationsQuestions:HowdoyoudefinetransitionbetweentwostatesinAngular?Howdoyoudefineawildcardstate?ArchitectureQuestions:Whatisagoodusecaseforngrx/store?Whatisagoodusecaseforngrx/entity?Canyoutalkaboutabugrelatedtoaracecondition,howtosolveitandhowtotestit?Whatisthedifferencebetweenasmart/containercomponentanddumb/presentationalcomponent?Whatisagoodusecaseexample?Whataretheadvantages?APIQuestions:Whatdoesthiscodedo:@HostBinding('class.valid')isValid;<div*ngIf='someObservableData|asyncasdata;elseloading'>{{data}}</div><ng-template#loading>LoadingData...</ng-template>Whywouldyouuserenderermethodsinsteadofusingnativeelementmethods?Howwouldyoucontrolsizeofanelementonresizeofthewindowinacomponent?WhatwouldbeagooduseforNgZoneservice?WhatarethebootstrapoptionsforNgZone?Whywouldyouusethem?(Angular5+)Howwouldyouprotectacomponentbeingactivatedthroughtherouter?HowwouldyouinsertanembeddedviewfromapreparedTemplateRef?Whatisthedifferencebetween@ViewChild()and@ContentChild()TemplateSyntaxQuestions:Howcanyouaddanactiveclasstoaselectedelementinalistcomponent?Whatisatemplatevariable.Howwouldyouuseit?Whatisthedifferenceofusingapropertybindingversesafunctionbindingonatemplate?Whathappensifyousubscribetoadatasourcemultipletimeswithasyncpipe?Whatisthedifferencebetweenng-content,ng-containerandng-template?Whenyoucreateadata-bindinginAngular,areyouworkingwithattributesorproperties?Whatisthedifferenceanyway?Whencanyouomitthebracketsintemplatebinding?ComponentQuestions:Whatistheminimumdefinitionofacomponent?Whatisthedifferencebetweenacomponentandadirective?Howdocomponentscommunicatewitheachother?HowdoyoucreatetwowaydatabindinginAngular?Howwouldyoucreateacomponenttodisplayerrormessagesthroughoutyourapplication?Whatdoesaleancomponentmeantoyou?ComponentInteraction&StateManagementQuestions:Howwouldyoupassdatafromaparentcomponenttoachildcomponent?Howwouldyoupassdatafromachildcomponenttoaparentcomponent?Whichcomponentswillbenotifiedwhenaneventisemitted?Tellmeaboutthedifferentwayshowyouwouldgetdatatoyourcomponentsfromaserviceandtalkaboutwhywouldyouuseonewayvstheother?Howwouldyouusecacheddata?FormsQuestions:Whendoyouusetemplatedrivenvsmodeldrivenforms?Why?Howdoyousubmitaform?What'sthedifferencebetweenNgForm,FormGroup,andFormControl?Howdotheyworktogether?What'stheadvantageofusingFormBuilder?HowdoyouaddformvalidationtoaformbuiltwithFormBuilder?What'sthedifferencebetweendirty,touched,andpristineonaformelement?Howcanyouaccessvalidationerrorsinthetemplatetodisplayerrormessages?Whatisasyncvalidationandhowisitdone?Whatisthecorrectformcontrolclassnamewhichissettotruewhenvalueismodified?NgModulesQuestions:WhatisthepurposeofNgModule?HowdoyoudecidetocreateanewNgModule?WhataretheattributesthatyoucandefineinanNgModuleannotation?Whatisthedifferencebetweenamodule'sforRoot()andforChild()methodsandwhydoyouneedit?WhatisprovidedInpropertyusedforinanNgModule?Whatwouldyouhaveinasharedmodule?Whatwouldyounotputsharedmodule?Whatmodulewouldyouputasingletonservicewhoseinstancewillbesharedthroughouttheapplication(e.g.ExceptionServiceandLoggerService)?WhatisthepurposeofexportsinaNgModule?WhatisthedifferencebetweenexportsanddeclarationsinNgModule?WhyisitbadifSharedModuleprovidesaservicetoalazyloadedmodule?ServicesQuestions:Whatistheusecaseofservices?Howaretheservicesinjectedtoyourapplication?Howdoyouunittestaservicewithadependency?Whyisitabadideatocreateanewserviceinacomponentliketheonebelow?letservice=newDataService();StructuralDirectivesQuestions:Whatisastructuraldirective?Howdoyouidentifyastructuraldirectiveinhtml?Whencreatingyourownstructuraldirectives,howwouldyoudecideonhidingorremovinganelement?Whatwouldbetheadvantagesordisadvantagesofchoosingonemethodratherthantheother?StyleGuideQuestions:WhataresomeoftheAngularStyleGuidesuggestionsyoufollowonyourcode?Why?Isitimportanttohaveastyleguide?Why/not?StylingQuestions:Howwouldyouselectacustomcomponenttostyleit.Whatpseudo-classselectortargetsstylesintheelementthathoststhecomponent?Howwouldyouselectallthechildcomponents'elements?Howwouldyouselectacssclassinanyancestorofthecomponenthostelement,allthewayuptothedocumentroot?Whatselectorforceastyledownthroughthechildcomponenttreeintoallthechildcomponentviews?Whatdoes:host-context()pseudo-classselectortargets?Whatdoesthefollowingcssdo?:host-context(.theme-light)h2{background-color:red;}LifecycleHooksQuestions:Whatisthepossibleorderoflifecyclehooks.WhenwillngOnInitbecalled?HowwouldyoumakeuseofngOnInit()?WhatwouldyouconsiderathingyoushouldbecarefuldoingonngOnInit()?WhatisthedifferencebetweenngOnInit()andconstructor()ofacomponent?WhatisagoodusecaseforngOnChanges()?ObservablesRxJSQuestions:Whatisthedifferencebetweenanobservableandapromise?Whatisthedifferencebetweenanobservableandasubject?Whataresomeoftheangularapisthatareusingobservables?Howwouldyoucacheanobservabledata?Howwouldyouimplementamultipleapicallsthatneedstohappeninorderusingrxjs?WhatisthedifferencebetweenswitchMap,concatMapandmergeMap?Howwouldyoumakesureanapicallthatneedstobecalledonlyoncebutwithmultipleconditions.Example:ifyouneedtogetsomedatainmultipleroutesbut,onceyougetit,youcanreuseitintheroutesthatneedsit,therefornoneedtomakeanothercalltoyourbackendapis.Howwouldyouimplementabrushbehaviorusingrxjs?Howwouldyouimplementacolorpickerwithrxjs?IfyouneedtorespondtotwodifferentObservable/Subjectwithonecallbackfunction,howwouldyoudoit?(ex:ifyouneedtochangetheurlthroughrouteparametersandwithprev/nextbuttons).Whatisthedifferencebetweenscan()vsreduce()?PerformanceQuestions:Whataresomeofthethingsthatyoupayattentionto,tomakesureyourangularapplicationisperformant?Whattoolswouldyouusetofindaperformanceissueinyourcode?Whattoolshaveyouusedtoimprovetheperformanceofyourapplication?Whataresomewaysyoumayimproveyourwebsite'sscrollingperformance?Explainthedifferencebetweenlayout,paintingandcompositing.HaveyouseenJeffCross'sNgCruisetalkonperformance?PipesQuestions:Whatisapurepipe?Whatisanasyncpipe?Whatkindofdatacanbeusedwithasyncpipe?Howdoyoucreateacustompipe?Howdoesasyncpipepreventsmemoryleeks?Whatisthedifferencebetweenpureandimpurepipes?RouterQuestions:WhatisthedifferencebetweenRouterModule.forRoot()vsRouterModule.forChild()?Whyisitimportant?HowdoesloadChildrenpropertywork?DoyouneedaRoutingModule?Why/not?Whendoesalazyloadedmoduleisloaded?Belowlinkdoesn'twork.Why?HowdoIfixit?<divrouterLink='product.id'></div>CanyouexplainthedifferencebetweenActivatedRouteandRouterState?Howdoyoudebugrouter?Whydoweneedrouteguards?WhatisaRouterOutlet?SecurityQuestions:TestingQuestions:Whataresomeofthedifferentteststypesyoucanwrite?Howdoyoumockaservicetoinjectinanintegrationtest?Howdoyoumockamoduleinanintegrationtest?Howdoyoutestacomponentthathasadependencytoanasyncservice?Whatisthedifferencebetween'async()'and'fakeAsync()'?TypeScriptQuestions:Whydoyouneedtypedefinitions?Howwouldyoudefineacustomtype?WhatisthedifferencebetweenanInterfaceandaClass?Firstlinebelowgivescompileerror,secondlinedoesn't.Why?someService.someMethod(x);someService['someMethod'](x);WhatareDiscriminateduniontypes?HowdoyoudefineObjectofObjectstypeintypescript?Howcanyoucapturethe'type'theuserprovides(e.g.number),sothatwecanusethatinformationlater.JavaScriptQuestions:Explainthedifferencebetweenvar,letandconstkeywords.Couldyoumakesureaconstvalueisgarbagecollected?ExplainObject.assignandpossibleusecases.ExplainObject.freezeandpossibleusecases.Explainthecodebelow.HowmanytimesthecreateValfunctioniscalled?functioncreateVal(){returnMath.random();};functionfun(val=createVal()){//Dosomethingwithval...}fun();fun(5);Whatisthespreadoperatordoinginthisfunctioncall?Seriously!doStuff(...args);Whatisdestructuringassignment?Explainwhythebelowstand-alonesyntaxisnotvalid?{a,b}={a:1,b:2}CodingQuestions:Whatwouldthesecomponentsrender?import{Component,ContentChildren,Directive,Input,QueryList}from'@angular/core';@Directive({selector:'pane'})exportclassPane{@Input()id:string;}@Component({selector:'tab',template:`<div>panes:{{serializedPanes}}</div>`})exportclassTab{@ContentChildren(Pane)panes:QueryList<Pane>;getserializedPanes():string{returnthis.panes?this.panes.map(p=>p.id).join(','):'';}}@Component({selector:'example-app',template:`<tab><paneid="1"></pane><paneid="2"></pane><paneid="3"*ngIf="shouldShow"></pane></tab><button(click)="show()">Show3</button>`,})exportclassContentChildrenComp{shouldShow=false;show(){this.shouldShow=true;}}FunQuestions:What'sacoolprojectthatyou'verecentlyworkedon?Whataresomethingsyoulikeaboutthedevelopertoolsyouuse?Whoinspiresyouintheangularcommunity?Doyouhaveanypetprojects?Whatkind?Howdidyoudesignthearchitectureofyourproject?What'syourfavoritefeatureofAngular?WhatisyourleastfavoritethingaboutAngular?(PleaseshareyourthoughtsbymakingapullrequesttoangularFeelings)Howdoyoulikeyourcoffee?Ifyoucoulddecideonanewfeatureforangular,whatwoulditbe?WhatisIvyandhowdoyouenableit?Contributors:AyşegülYönetMoAtieJayKanMattCarpenterRyanChenkieShyamChenJosepSayolTiepPhanIgorFesenkoStephanBhanuChamakuriNandaMeowZedongBenjaminCabanesBunyaminCoskunerHaHoangMerveAğcaAhmetZeybekMarekSławińskiYou?
评论