Q56-Q60

Q56. How you do exception handling and logging in your angular project? any UI project?

Q57. What do you mean by @injectable in Angular?

Q58. What is @input and @output decorators in angular?

Q59. Explain the structure of angular project. 

Q60. How to create custom directive in Angular 6?

=======================================================================

Q56. How you do exception handling and logging in your angular project? any UI project?

Answer:

When a API URL in service class doesn't exits and we are getting '404' error response

1. We can use pipe with observable. and 'catchError' to handle the error. 

2. Using Error callback on controller page. error keyword. 

3. Using HttpInterceptors - for logging 

https://www.youtube.com/watch?v=xXpXn6X-xqs

=======================================================================

Q57. What do you mean by @injectable in Angular?

Answer:

@Injectable, Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.

Its main role is on service class. If we remove @Injectable from service class than the dependencies on which your service class depends will fail. like HTTP service. 

=======================================================================

Q58. What is @input and @output decorators in angular?

Answer:

@Input and @Output decorators are used to transfer data between two components when they have child parent relationship. 

By child parent relation we mean selector of a child component is used on parent html page. 

@Input, Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).

• Input decorator is used to send data from Parent component to child component. 

@output, Declares an output property that fires events that you can subscribe to with an event binding

• Output decorator is used to send data from child to parent. 

Live Example: Good example below

https://stackblitz.com/edit/angular-ivy-bqqxvq

https://www.youtube.com/watch?v=nwcMDSu5Ow4&ab_channel=SahosoftSolutions

=======================================================================

Q59. Explain the structure of angular project. 

Answer:

when we run the command ng new <<projectName>> we get a template to start work. this is created by CLI (command line interface). 

We got initial structure like

1. e2e - this folder is used for e2e testing. 

2. node_modules - all packages requierd are here. 

3. SRC folder - Make folder where will do our scripting. 

4. some outside files

Some outside files -

1. angular.json - Project specific configurations are present here. 
2. .gitignore - if you are using git repository. 
3. Karma.config.js - For unit testing 
4. package.json - Packages required for project. 
5. tsconfig.json - How your typescript code will be compiled into javascript. 
6. tsconfig.app.json
7. tslint.json

SRC-

1. index.html
2. main.ts
3. app.module.ts
4. pollyfillts
5. environment.ts and environment.prod.ts
6. app-routing.module.ts
7. app.component.ts

=======================================================================

Q60. How to create custom directive in Angular 6?

Answer:

Custom directive could be structural or Attribute directive. 

=======================================================================