Tag Archives: Angular

AngularJs – LinkedIn Skill Assessment

Q1. What is the purpose of the ViewChild decorator in this component class?

    @Component({
    . . .
    template: '<p #bio></p>'
    })
    export class UserDetailsComponent {
    @ViewChild('bio') bio;
    }
  • It provides access from within the component class to the ElementRef object for thetag that has the bio template reference variable in the component’s template view. It provides access from within the component class to the null object for the null tag that has the null template reference variable in the component’s template view.
  • It indicates that thetag be rendered as a child of the parent view that uses this component. It indicates that the null tag be rendered as a child of the parent view that uses this component.
  • It makes thetag in the template support content projection. It makes the null tag in the template support content projection.
  • It makes thetag visible in the final render. If the #bio was used in the template and the @ViewChild was not used in the class, then Angular would automatically hide thetag that has #bio on it.

Q2. What method is used to wire up a FormControl to a native DOM input element in reactive forms? What method is used to wire up a null to a native DOM input element in reactive forms?

  • Add the string name given to the FormControl to an attribute named controls on the element to indicate what fields it should include. Add the string name given to the null to an attribute named controls on the null element to indicate what fields it should include.
  • Use the square bracket binding syntax around the value attribute on the DOM element and set that equal to an instance of the FormControl. Use the square bracket binding syntax around the value attribute on the DOM element and set that equal to an instance of the null.
  • Use the formControlName directive and set the value equal to the string name given to the FormControl. Use the null directive and set the value equal to the string name given to the null.
  • Use the string name given to the FormControl as the value for the DOM element id attribute.

Q3. What is the difference between the paramMap and the queryParamMap on the ActivatedRoute class? What is the difference between the null and the null on the null class?

  • The paramMap is an object literal of the parameters in a route’s URL path. The queryParamMap is an Observable of those same parameters. The null is an object literal of the parameters in a route’s URL path. The null is a null of those same parameters.
  • The paramMap is an Observable that contains the parameter values that are part of a route’s URL path. The queryParamMap is a method that takes in an array of keys and is used to find specific parameters in the paramMap. The null is a null that contains the parameter values that are part of a route’s URL path. The null is a method that takes in an array of keys and is used to find specific parameters in the null.
  • paramMap is the legacy name from Angular 3. The new name is queryParamMap.null is the legacy name from Angular 3. The new name is null.
  • Both are Observables containing values from the requested route’s URL string. The paramMap contains the parameter values that are in the URL path and the queryParamMap contains the URL query parameters.

Q4. Based on the following usage of the async pipe, and assuming the users class field is an Observable, how many subscriptions to the users Observable are being made?

    <h2>Names</h2>
    <div *ngFor="let user of users | async">{{ user.name }}</div>
    <h2>Ages</h2>
    <div *ngFor="let user of users | async">{{ user.age }}</div>
    <h2>Genders</h2>
    <div \*ngFor="let user of users | async">{{ user.gender }}</div>
  • None. The async pipe does not subscribe automatically. None. The null pipe does not subscribe automatically.
  • None. The template syntax is not correct. None. The template syntax is not correct.
  • Three. There is one for each async pipe. Three. There is one for each null pipe.
  • One. The async pipe caches Observables by type internally.

Q5. How can you use the HttpClient to send a POST request to an endpoint from within an addOrder function in this OrderService?

export class OrderService {
    constructor(private httpClient: HttpClient) { }
    addOrder(order: Order) {
    // Missing line
    }
}
  • this.httpClient.url(this.orderUrl).post(order);null
  • this.httpClient.send(this.orderUrl, order);null
  • this.httpClient.post(this.orderUrl, order);null
  • this.httpClient.post(this.orderUrl, order) .subscribe();

Q6. What is the RouterModule.forRoot method used for? What is the null method used for?

  • registering any providers that you intend to use in routed components registering any providers that you intend to use in routed components
  • registering route definitions at the root application level registering route definitions at the root application level
  • indicating that Angular should cheer on your routes to be successful indicating that Angular should cheer on your routes to be successful
  • declaring that you intend to use routing only at the root level

Q7. Which DOM elements will this component metadata selector match on?

    @Component({
    selector: 'app-user-card',
    . . .
    })
  • any element with the attribute app-user-card, such as

    any element with the attribute null, such as null

  • the first instance of the first instance of null
  • all instances of all instances of null
  • all instances of

Q8. What is the correct template syntax for using the built-in ngFor structural directive to render out a list of productNames?What is the correct template syntax for using the built-in null structural directive to render out a list of null?

  • [ ]
<ul>
    <li [ngFor]="let productName of productNames">
    {{ productName }}
    </li>
</ul>
  • [ ]
<ul>
    <li ngFor="let productName of productNames">
    {{ productName }}
    </li>
</ul>
  • [ ]
<ul>
    <li *ngFor="let productName of productNames">
    {{ productName }}
    </li>
</ul>
  • [ ]
<ul>
    <? for productName in productNames { ?>
    <li>{{ productName }}</li>
    <? } ?>
</ul>

Q9. What are the two component decorator metadata properties used to set up CSS styles for a component? What are the two component decorator metadata properties used to set up CSS styles for a component?

  • viewEncapsulation and viewEncapsulationFilesnull and null
  • There is only one and it is the property named css. There is only one and it is the property named null.
  • css and cssUrlnull and null
  • styles and styleUrlsnull and null

Q10. With the following component class, what template syntax would you use in the template to display the value of the title class field?

    @Component({
    selector: 'app-title-card',
    template: ''
    })
    class TitleCardComponent {
    title = 'User Data';
    }
  • {{ ‘title’ }}null
  • {{ title }}null
  • [title]null
  • A class field cannot be displayed in a template via the template syntax.

Q11. What is the purpose of the valueChanges method on a FormControl? What is the purpose of the null method on a null?

  • It is used to configure what values are allowed for the control. It is used to configure what values are allowed for the control.
  • It is used to change the value of a control to a new value. You would call that method and pass in the new value for the form field. It even supports passing in an array of values that can be set over time. It is used to change the value of a control to a new value. You would call that method and pass in the new value for the form field. It even supports passing in an array of values that can be set over time.
  • It returns a Boolean based on if the value of the control is different from the value with which it was initialized. It returns a Boolean based on if the value of the control is different from the value with which it was initialized.
  • It is an observable that emits every time the value of the control changes, so you can react to new values and make logic decisions at that time. It is an null that emits every time the value of the control changes, so you can react to new values and make logic decisions at that time.

Q12. What directive is used to link an <a> tag to routing?

  • routeTo
  • routerLink
  • routePathn
  • appLink

Q13. What is the Output decorator used for in this component class?

    @Component({
    selector: 'app-shopping-cart',
    . . .
    })
    export class ShoppingCartComponent {
    @Output() itemTotalChanged = new EventEmitter();
    }
  • It makes the itemTotalChanged class field public. It makes the null class field public.
  • It provides a way to bind values to the itemTotalChanged class field, like so: <app-shopping-cart [itemTotalChanged]=”newTotal”>. It provides a way to bind values to the null class field, like so: null.
  • It provides a way to bind events to the itemTotalChanged class field, like so: <app-shopping-cart (itemTotalChanged)=”logNewTotal($event)”>. It provides a way to bind events to the null class field, like so: null.
  • It is simply a way to put a comment in front of a class field for documentation.

Q14. What is the difference between these two markup examples for conditionally handling display?

    <div \*ngIf="isVisible">Active</div>
    <div [hidden]="!isVisible">Active</div>
  • The ngIf is shorthand for the other example. When Angular processes that directive, it writes a div element to the DOM with the hidden property. The null is shorthand for the other example. When Angular processes that directive, it writes a null element to the DOM with the null property.
  • They are fundamentally the same. They are fundamentally the same.
  • The ngIf directive does not render the div in the DOM if the expression is false. The hidden property usage hides the div content in the browser viewport, but the div is still in the in the DOM. The null directive does not render the null in the DOM if the expression is null. The null property usage hides the null content in the browser viewport, but the null is still in the in the DOM.
  • The ngIf is valid, but the use of the hidden property is wrong and will throw an error.

Q15. How can you disable the submit button when the form has errors in this template-driven forms example?

<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>
  • [ ]
<button (click)="submit(userForm.value)"
  disable="userForm.invalid">
Save</button>
  • [ ]
 <button (click)="submit(userForm.value)"
  [disabled]="userForm.invalid">
Save</button>
  • [ ]
 <button (click)="submit(userForm.value)"
  [ngForm.disabled]="userForm.valid">
Save</button>
  • [ ]
 <button (click)="submit(userForm.value)"
  *ngIf="userForm.valid">
Save</button>
Spread the love

React vs Angular

Let’s start with Angular 2. It is a JavaScript framework with open source, that is way much better than the first Angular. The main difference is simplification, which means that you won’t find here all those complicated modules and directives that made Angular 1 so complicated and agglomerate. The result was immediate and the performance of the technology increased greatly. Along with that, now the technology supports native app and can render on a server side.

The technology gained its popularity due to the name of its creator (Google), more than that, the framework is very easy to learn.

Yet, just like every tool, this one has its advantages and disadvantages as well. Among the assets we can list:

  • Orientation on the apps with a big amount of interactive client-side code.
  • Good solution for dynamic apps with a single page.
  • Fast development process
  • Needs less code in some classes
  • Advanced testing features
  • Model-View-Controller ballance

Lower we listed the disadvantages of the framework:

  • Relatively slow when it needs to display large amounts of data
  • Not very SEO friendly.

React JS is a library that also has open source and includes JSX compiler. The fundamental contrast of these systems is that React JS is a library to render your views, not a framework.

It became popular because of the Facebook, that backs it up. React JS is a rather SEO friendly technology. And the icing on a case is its high performance and flexibility.

The pros of the technology are:

  • It’s very compatible with SEO principles
  • UI text cases are easy to create
  • You can reuse the components easily
  • Fast with big number of elements
  • Chrome extension simplifies the debugging process

And here goes a spoon of tar in a barrel of honey:

  • Sometimes the code needs to be long
  • You have to process data changes manually
  • It is view oriented

Making decision

Before making decision investigate the licencing issues, that may occur. As we said, both technologies are open source, however there still may be some limitations connected with their usage.

Model-View-Controller pattern, that lets divide data of the project into tree category and modify each separately if it’s needed is an out-of-the-box feature of Angular 2. Which gives a huge advantage in comparison with React JS, that doesn’t have such option.

The other score one for Angular 2 is its ability to display templates writing easily. With this technology you get very clear UI for the data and can get the end result with a really intuitive approach to the UI writing less code.

React JS is more complicated with it. The technology needs special functions to control data display. You have to determine the way data is represented before it’s coded into the DOM.

Data binding is another question. Angular 2 uses two-way data binding. The data is always directed only in one way, so you always know where your data changes. And this system gets really useful when it goes about debugging.

The Performance issues are extremely important when we work with very massive apps. Angular 2 has a watcher for every binding allows to track all the progressions in Dom. One a View gets new updates, the system compares new values with primary meanings. And the problem is that the technology checks not only the meanings that changed but also all of them. This fact as you understand is a bane of Angular’s productivity.

React JS and its virtual DOM doesn’t need to check new data with the whole system. Once a user entered new data, React created a new virtual Dom and compares it with the previous one. And when the library compares and sees the difference between these two versions, the system rebuilds the virtual DOM. The procedure is performed with the server, thusly reducing the load on a browser. And while there are no active users on a site Psychology Articles, React JS performance increases.

Spread the love

Angular Basic Interview Questions and Answers

Angular is a TypeScript-based open-source web application framework Developed and Designed by Google. Angular is the majority used for One Page application and Material Design Concepts for Nowadays. It allows us to manipulate the HTML document and bind data with DOM seamlessly.

Angular is an Integral Part of the web at the age of today. It is widely used by may tech-giants and MNCs. Even We can say It is a need of time to have a skill like angular in your stack. Without angular, your stack is not completed.

We are providing a number of Best Angular Questions along with answers for the Freshers level. They are also useful for Developers having experienced more than 2 years. The facts are based on angular 2 interview questions and also relevant to the latest versions of angular.

Angular interview questions are key to success in a technical Interview you are going for. It is a summary of concepts and a test of Angular Questions also.

What is Angular JS?

Angular JS is a TypeScript framework used for developing single-page applications. It is maintained by Google.

What are the advantages of using Angular JS?

  1. Modular Structure based on MVC.
  2. Real-time one-way and two-way data binding and DOM manipulation.
  3. Reusable components
  4. Inbuilt form validation rules

What are the main features of Angular JS?

  1. Seamless rendering
  2. MVC Structure
  3. SuperScript of JavaScript
  4. Suitable for One-page application
  5. Supports Cache
  6. Service Worker Support
  7. Tree Shaking

What is Template?

Templates are the view part of MVC and HTML documents containing directives, elements, and attributes. A template is used to display results on browsers.

What is a controller?

A controller is an Object, defined by object constructor as per Angular 2.

What are the directives in Angular JS?

Directives are the HTML attributes for angular. Attributes prefixed by “ng-” and used to extend the scope of dom.

What is the difference between jQuery and Angular JS?

jQuery is a javascript library and based on functional programming features.jQuery used to handle events, animation, dom, etc. Whereas Angular is rich in UI and seamless in dynamic templating having EASY DOM manipulation.

What are the modules in Angular JS?

A module in AngularJS is a packet having different necessary items in it like controller, filters, directives, services.

What is Data Binding?

Data binding is the key feature of Angular and many such frameworks. Data binding refers to the synchronization of information. The value stored in variables reflects at the places where are used within no time and without change of frame. There are two types of data binding-

  1. One way data binding
  2. Two-way data binding

What are one-way bindings?

One way data binding is the synchronization from Modal to View. When there is a change in Model it reflects in View and in forms. But unable to change the value in a model when changes happen in view after user input.

What are two-way bindings?

Two-way binding is the bi-direction syncing of data. This reflects the data either side when changes occur. Changes in model lead to reflection in View and Changes in view reflects in Modal.

What is the component?

Components are the basic building blocks in applications. They are completed with MVC sub-components. They handle data, render views and accept user inputs.

What is the provider?

As per https://docs.angularjs.org
A provider is an object with a $get() method. The injector calls the $get method to create a new instance of a service. The Provider can have additional methods that would allow for configuration of the provider.$provide is used to create new providers.

What is the link?

Angular JS has a directive link on which link function is based. We can define a directive’s API using these functions.

What is the factory method?

A factory is a function that returns an object. They are reusable singleton objects and can be used as injections. We can create using factory.

What do you mean by ng-app,ng-init,ng-model?

ng-app: this is the fundamental directive to create an Angular JS Application.
ng-init: initialize the application and data
ng-model: define the model to be used in an application.

Can we use the jQuery library in Angular JS?

Yes, we can use jQuery and many other libraries along with Angular JS.

What do you understand by deep linking?

Deep linking is the redirection to the specific page without going through any other pages. This is a normal term and implemented by Angular JS by default.

What is the service?

Services are substitutable objects that can be used to organize and share code across the application.

What is internationalization?

As per https://docs.angularjs.org :
Internationalization (i18n) is the process of developing products in such a way that they can be localized for languages and cultures easily. This is the translation of application interfaces according to any locale.

What is Injector in Angular JS?

The injector is a subsystem in Angular JS which provide reusable component, dependency management making them available on request.

How can we share data between controllers?

Can move data by returning a factory and by using the reference of the same object by other controllers.

What is the digest cycle?

Digest Cycle allows us to write custom and complex directives for data binding processes.

What is a singleton pattern and where we can find it in Angular JS?

Singleton is a static variable and holds private instances of itself. It allows only a single instance to be created.

What is the interceptor?

Interceptor is used to modify the response. It only calls after the HTTP response received. It accepts the response object as an input

What is routing?

We use ngRoute to implement routing. Routing helps us to modularize our application based on logical units.

What does ‘ng-serve’ do?

The ng serve command launches the server watches your files and rebuilds the app as you make changes to those files.

what does –open or -o command do in angular?

The –open (or just -o) command automatically opens your browser to http://localhost:4200/.

How can we create a component using Angular CLI?

Using CLI we can create a component in very less time:

| ng generate component heroes |

It will be better if You could also read Jquery Interview Questions.

I hope that the above content will help you minimize the troubles in your interview. Please do write to us for your feedback. Let us know our weakness and send us more Interview Questions so that we can publish here.

Spread the love