Cara menggunakan javascript interview handbook

Exception: SyntaxError: expected expression, got ‘<' Because there is stray tag. When we fix that there goes:Exception: ReferenceError: y is not defined Because you declare var Y but use y. After we fix that bug we’ll see: 1undefinedYour questions are either careless or diabolically hard.Q45 Exception: SyntaxError: unexpected token: identifier Delete != delete Exception: SyntaxError: unexpected token: identifier X != x Exception: ReferenceError: output is not defined Output != output And after all these fixes we got 0 in console.Why do you care so little about code?Q46 Output != output X.Foo != X.fooQ47 Exception: SyntaxError: unexpected token: identifier Because there is missing ; Should be: delete Emp1.company; Exception: ReferenceError: employee is not defined Employee != employeeEmp1 != emp1Exception: ReferenceError: Console is not definedAnd after all these fixes we get xyzQ48 Exception: SyntaxError: unexpected token: identifier is it Function or function? Who knows… Fix that and no error. No output also. Needs console.log(typeof Bar()); And then output number… Why? Because this works. Function can have one name, but many aliases…Dude, it’s 2019! Why are you teaching people like this???

This article summarizes a list of Angular interview questions that I would ask candidates and that I get often asked in interviews.

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. Angular is built entirely in TypeScript and uses it as a primary language. As it is a framework it has many useful built-in features like routing, forms, HTTP client, Internationalization (i18n), animations, and many more.

Vue.js and React are no application frameworks but JavaScript libraries to build user interfaces. Vue.js describe itself as an incrementally adoptable ecosystem that scales between a library and a full-featured framework and React as a JavaScript library for building user interfaces.

Check the Angular blog for latest release notes, for example, the Angular 11 release.

• Component: The basic building block of an Angular application and is used to control HTML views.
• Modules: An Angular module contains basic building blocks like components, services, directives, etc. Using modules you can split your application into logical pieces where each piece performs a single task and is called a "module".
• Templates: A template represents the view of an Angular application.
• Services: Services are used to create components that can be shared across the entire application.
• Metadata: Metadata is used to add more data to an Angular class.

Dependency Injection (DI) is an important design pattern in which a class does not create dependencies itself but requests them from external sources. Dependencies are services or objects that a class needs to perform its function. Angular uses its own DI framework for resolving dependencies. The DI framework provides declared dependencies to a class when that class is instantiated.

Angular heavily relies on RxJS, a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. RxJS introduces Observables, a new Push system for JavaScript where an Observable is a producer of multiple values, "pushing" them to Observers (Consumers).

1. Data sharing between parent and one or more child components using the @Input() and

   <button (click)="onSave()">Save</button>

   0 directives.
2. Data sharing using an Angular service
3. Using state management, like NgRx
4. Read and write data to local storage
5. Pass data via URL parameters

• Property binding: Property binding in Angular helps you set values for properties of HTML elements or directives

<img [src]="itemImageUrl">

• Event binding: Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

<button (click)="onSave()">Save</button>

• Two-way binding: Two-way binding gives components in your application a way to share data. Use two-way binding binding to listen for events and update values simultaneously between parent and child components.

<app-sizer [(size)]="fontSizePx"></app-sizer>

Service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.

An Angular component should focus on presenting data and enabling the user experience. It should mediate between the application logic (data model) and the view (rendered by the template).

Angular services help us to separate non-view-related functionality to keep component classes lean and efficient.

You must register at least one provider of any service you are going to use. A service can be provided for specific modules or components or it can be made available everywhere in your application.

@Injectable({ providedIn: 'root',})

Angular creates a single, shared instance if a service is provided at root level. This shared instance is injected into any class that asks for it. By using the

<button (click)="onSave()">Save</button>

Registering a provider with a specific NgModule will return the same instance of a service to all components in that NgModule if they ask for it.

@NgModule({  providers: [  BackendService,  Logger ], ...})

A new instance of a service is generated for each new instance of the component if you register the provider at component level.

@Component({  selector:    'app-hero-list',  templateUrl: './hero-list.component.html',  providers:  [ HeroService ]})

Directives add behavior to an existing DOM element or an existing component instance. The basic difference between a component and a directive is that a component has a template, whereas an attribute or structural directive does not have a template and only one component can be instantiated per an element in a template.

We can differentiate between three types of directives:

• Components: These directives have a template.
• Structural directives: These directives change the DOM layout by adding and removing DOM elements.
• Attribute directives: These directives change the appearance or behavior of an element, component, or another directive.

Angular provides two ways to compile your app. The compilation step is needed as Angular templates and components cannot be understood by the browser therefore the HTML and TypeScript code is converted into efficient JavaScript code.

When you run the

<button (click)="onSave()">Save</button>

<button (click)="onSave()">Save</button>

<button (click)="onSave()">Save</button>

<button (click)="onSave()">Save</button>

<button (click)="onSave()">Save</button>

JIT compiles your app in the browser at runtime. This was the default until Angular 8.

AOT compiles your app at build time. This is the default since Angular 9.

• The application can be rendered without compiling the app because the browser downloads a pre-compiled version of the application.
• External CSS style sheets and HTML templates are included within the application JavaScript code. This way, a lot of AJAX requests can be saved.
• It is not necessary to download the Angular compiler which reduces the application payload.
• Template binding errors can be detected and reported during the build step itself
• No injection attacks as HTML templates and components are compiled into JavaScript.

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

After your application instantiates a component or directive by calling its constructor, Angular calls the hook methods you have implemented at the appropriate point in the lifecycle of that instance.

Angular calls these hook methods in the following order:

1. ngOnChanges: Is called, when an input/output binding value changes.
2. ngOnInit: Is called after the first ngOnChanges.
3. ngDoCheck: Is called, if we as developer triggered a custom change detection.
4. ngAfterContentInit: Is called after the content of a component is initialized.
5. ngAfterContentChecked: Is called after every check of the component's content.
6. ngAfterViewInit: Is called after a component's views are initialized.
7. ngAfterViewChecked: Is called after every check of a component's views.
8. ngOnDestroy: Is called just before the directive is destroyed.

ViewChild and ContentChild are used for component communication in Angular, for example, if a parent component wants access to one or multiple child components.

• A ViewChild is any component, directive, or element which is part of a template.
• A ContentChild is any component or element which is projected in the template.

In Angular exist two different DOMs:

• Content DOM which has only knowledge of the template provided by the component at hand or content injected via

  <button (click)="onSave()">Save</button>

  7.
• View DOM which has only knowledge of the encapsulated and the descending components.

Both types of modules can help to modularize code and Angular relies on both kinds of modules but they are very different.

A JavaScript module is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your app.

NgModules are specific to Angular and a NgModule is a class marked by the

<button (click)="onSave()">Save</button>

• <button (click)="onSave()">Save</button>

  9 function decorator allows you to handle events of the host element in the directive class. For example, it can be used to change the color of the host element if you hover over the host element with the mouse.

• <app-sizer [(size)]="fontSizePx"></app-sizer>

  0 function decorator allows you to set the properties of the host element from the directive class. In this directive class, we can change any style property like height, width, color, margin, border, etc.

Please read my article The Last Guide For Angular Change Detection You'll Ever Need for a detailed explanation. 

Component CSS styles are encapsulated into the component's view to avoid styling side effects in the rest of the Angular application.

The type of encapsulation can be controlled per component via the

<app-sizer [(size)]="fontSizePx"></app-sizer>

// warning: few browsers support shadow DOM encapsulation at this timeencapsulation: ViewEncapsulation.ShadowDom

You can choose between the following modes:

• <app-sizer [(size)]="fontSizePx"></app-sizer>

  2 which is the default mode and emulates the shadow DOM behavior. It renames and preprocesses the CSS code to effectively scope the CSS to the component's view. Each DOM element gets attached some additional attributes like

  <app-sizer [(size)]="fontSizePx"></app-sizer>

  3 or

  <app-sizer [(size)]="fontSizePx"></app-sizer>

  4. An element that would be a shadow DOM host in native encapsulation has a generated

  <app-sizer [(size)]="fontSizePx"></app-sizer>

  3 attribute. This is typically the case for component host elements. An element within a component's view has a

  <app-sizer [(size)]="fontSizePx"></app-sizer>

  4 attribute that identifies to which host's emulated shadow DOM this element belongs.

• <app-sizer [(size)]="fontSizePx"></app-sizer>

  7 which tells Angular to not use view encapsulation and adds CSS to the global styles. Essentially, this is the same behavior as pasing the component's styles into the HTML.

• <app-sizer [(size)]="fontSizePx"></app-sizer>

  8 which uses the browser's native shadow DOM implementation. It attaches a shadow DOM to the component's host element and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

I hope this list of Angular interview questions will help you to get your next Angular position. Leave me a comment if you know any other important Angular interview questions.