You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| 118. |[What is the difference between dirty, touched, and pristine on a form element?](#q-what-is-the-difference-between-dirty-touched-and-pristine-on-a-form-element)|
177
175
| 119. |[What is async validation and how is it done?](#q-what-is-async-validation-and-how-is-it-done)|
178
176
179
-
180
-
### Pipes
177
+
## Pipes
181
178
182
179
|Sl.No| Questions |
183
180
|-----|------------------------------------|
@@ -190,8 +187,7 @@
190
187
| 126. |[How does async pipe prevents memory leaks?](#q-how-does-async-pipe-prevents-memory-leaks)|
191
188
| 127. |[What happens if you subscribe to a data source multiple times with async pipe?](#q-what-happens-if-you-subscribe-to-a-data-source-multiple-times-with-async-pipe)|
192
189
193
-
194
-
### RxJS
190
+
## RxJS
195
191
196
192
|Sl.No| Questions |
197
193
|-----|--------------------------------|
@@ -224,9 +220,8 @@
224
220
| 154. |[How would you implement a brush behavior using rxjs?](#q-how-would-you-implement-a-brush-behavior-using-rxjs)|
225
221
| 155. |[How would you implement a color picker with rxjs?](#q-how-would-you-implement-a-color-picker-with-rxjs)|
226
222
| 156. |[If you need to respond to two different Observable/Subject with one callback function, how would you do it?(ex: if you need to change the url through route parameters and with prev/next buttons).](#q-if-you-need-to-respond-to-two-different-observable-subject-with-one-callback-function-how-would-you-do-it-ex-if-you-need-to-change-the-url-through-route-parameters-and-with-prev-next-buttons)|
| 208. |[what is the difference between ng-content, ng-container and ng- template?](#q-what-is-the-difference-between-ng-content-ng-container-and-ng-template)|
297
290
| 209. |[When you create a data-binding in Angular, are you working with attributes or properties? What is the difference anyway?](#q-when-you-create-a-data-binding-in-angular-are-you-working-with-attributes-or-properties-what-is-the-difference-anyway)|
| 221. |[How would you select all the child components elements?](#q-how-would-you-select-all-the-child-components-elements)|
316
308
| 222. |[How would you select a css class in any ancestor of the component host element, all the way up to the document root?](#q-how-would-you-select-a-css-class-in-any-ancestor-of-the-component-host-element-all-the-way-up-to-the-document-root)|
| 232. |[How would you use cached data?](#q-how-would-you-use-cached-data)|
333
324
| 233. |[What are some ways you may improve your website scrolling performance?](#q-what-are-some-ways-you-may-improve-your-website-s-scrolling-performance)|
334
325
335
-
336
-
### Miscellaneous
326
+
## Miscellaneous
337
327
338
328
|Sl.No| Questions |
339
329
|-----|--------------------------------------|
@@ -355,6 +345,8 @@
355
345
356
346
## # 1. ANGULAR BASICS
357
347
348
+
<br/>
349
+
358
350
## Q. What are the frequently used command in angular?
359
351
360
352
|Commands |Description |
@@ -387,22 +379,24 @@
387
379
388
380
Angular has 2 types of build dev build or prod build
389
381
390
-
**JIT**
382
+
**1. JIT:**
383
+
391
384
Just-in-Time (JIT) is a type of compilation that compiles app in the browser at runtime. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. i.e, the below commands used for JIT compilation,
392
385
393
-
```javascript
386
+
```js
394
387
ng build
395
388
ng serve
396
389
```
397
-
**AOT**
390
+
391
+
**2. AOT:**
398
392
Ahead-of-Time (AOT) is a type of compilation that compiles app at build time. For AOT compilation, include the `--aot` option with the ng build or ng serve command as below,
399
393
400
-
```javascript
394
+
```js
401
395
ng build --aot
402
396
ng serve --aot
403
397
```
404
398
405
-
```
399
+
```js
406
400
ng build or ng build --dev -this is for development build
407
401
ng build --prod -this is for production build
408
402
```
@@ -414,7 +408,6 @@ ng build --prod - this is for production build
414
408
|Dev build is not tree shaked |Production build is tree shaked |
415
409
|No AOT compilation |AOT compilation takes place |
416
410
417
-
418
411
***minification** - process of removing excess whitespace, comments and optinal tokens like curly braces and semi colons
419
412
***uglification** - process of transforming code to use short variable and function names
420
413
***tree shaking** - is the process of removing any code that we are not actually using in our application from the final bundle
@@ -449,7 +442,7 @@ You can control your app compilation in two ways
449
442
450
443
## Q. How to optimize loading large data in angular?
451
444
452
-
**Load Time Performance**
445
+
**Load Time Performance:**
453
446
454
447
1.**AOT**: The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
455
448
2.**Tree-shaking**: This is the process of removing unused code resulting in smaller build size. In **angular-cli**, Tree-Shaking is enabled by default.
@@ -789,7 +782,7 @@ subject.next("d"); // Subscription got d
789
782
790
783
Subject does not return the current value on Subscription. It triggers only on `.next(value)` call and return/output the value
791
784
792
-
```javascript
785
+
```js
793
786
var subject =newRx.Subject();
794
787
795
788
subject.next(1); //Subjects will not output this value
@@ -818,7 +811,7 @@ observerB: 3
818
811
819
812
A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject does not hold a value. BehaviourSubject will return the initial value or the current value on Subscription.
820
813
821
-
```javascript
814
+
```js
822
815
var subject =newRx.BehaviorSubject(0); // 0 is the initial value
823
816
824
817
subject.subscribe({
@@ -2152,7 +2145,7 @@ interface Observer<T> {
2152
2145
}
2153
2146
```
2154
2147
A handler that implements the Observer interface for receiving observable notifications will be passed as a parameter for observable as below,
2155
-
```javascript
2148
+
```js
2156
2149
myObservable.subscribe(myObserver);
2157
2150
```
2158
2151
*Note: If you do not supply a handler for a notification type, the observer ignores notifications of that type.*
@@ -2966,7 +2959,7 @@ The commonly-needed services, pipes, and directives provided by `@angular/common
2966
2959
## Q. What is codelyzer?
2967
2960
2968
2961
Codelyzer provides set of tslint rules for static code analysis of Angular TypeScript projects. ou can run the static code analyzer over web apps, NativeScript, Ionic etc. Angular CLI has support for this and it can be use as below,
2969
-
```javascript
2962
+
```js
2970
2963
ngnewcodelyzer
2971
2964
nglint
2972
2965
```
@@ -3099,7 +3092,7 @@ export class App {
3099
3092
3100
3093
Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.
3101
3094
1. You can enable ivy in a new project by using the --enable-ivy flag with the ng new command
3102
-
```javascript
3095
+
```js
3103
3096
ngnewivy-demo-app--enable-ivy
3104
3097
```
3105
3098
2. You can add it to an existing project by adding `enableIvy` option in the `angularCompilerOptions` in your project `tsconfig.app.json`.
@@ -3163,7 +3156,7 @@ The Angular Language Service is a way to get completions, errors, hints, and nav
3163
3156
## Q. How do you install angular language service in the project?
3164
3157
3165
3158
You can install Angular Language Service in your project with the following npm command
3166
-
```javascript
3159
+
```js
3167
3160
npminstall--save-dev @angular/language-service
3168
3161
```
3169
3162
After that add the following to the "compilerOptions" section of your project tsconfig.json
@@ -3216,7 +3209,7 @@ The Angular CLI command `ng run` is used to invoke a builder with a specific tar
3216
3209
3217
3210
An App shell is a way to render a portion of your application via a route at build time. This is useful to first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. You can achieve this using Angular CLI which generates an app shell for running server-side of your app.
3218
3211
3219
-
```javascript
3212
+
```js
3220
3213
nggenerateappShell [options] (or)
3221
3214
nggappShell [options]
3222
3215
```
@@ -3332,11 +3325,11 @@ Below are the list of key advantages of Bazel tool,
3332
3325
The `@angular/bazel` package provides a builder that allows Angular CLI to use Bazel as the build tool.
3333
3326
3334
3327
**1. Use in an existing applciation:** Add `@angular/bazel` using CLI
3335
-
```javascript
3328
+
```js
3336
3329
ngadd @angular/bazel
3337
3330
```
3338
3331
**2. Use in a new application:** Install the package and create the application with collection option
3339
-
```javascript
3332
+
```js
3340
3333
npminstall-g @angular/bazel
3341
3334
ngnew--collection=@angular/bazel
3342
3335
```
@@ -3360,10 +3353,10 @@ bazel run [target]: Compile the program represented by target and then run it.
3360
3353
<b><a href="#">↥ back to top</a></b>
3361
3354
</div>
3362
3355
3363
-
<br/>
3364
-
3365
3356
## # 2. CONFIGURATION AND TOOLS
3366
3357
3358
+
<br/>
3359
+
3367
3360
## Q. What is angular CLI?
3368
3361
3369
3362
Angular CLI(**Command Line Interface**) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.
0 commit comments