Google News
logo
Angular Interview Questions
Angular 14, the latest version of the TypeScript-based free and open-source web app framework was launched on 2nd June 2022. Considering all the releases before, Angular 14 is one of Angular's most methodical pre-planned upgrades. If you are interested in a bird-eye view of what's fresh in Angular 14, then here's a quick sneak at latest Angular 14 features and updates. 
 
Angular 14 Features :
 
* Standalone Components
* Typed Forms
* Streamlined page title accessibility (Title Strategy)
* Extended developer diagnostics (ng compilation) 
* Bind to protected component members
* Optional Injectors in Embedded Views
* NgModel OnPush

Source : F T L

In the latest version of Angular, you can write dynamic CSS styles by using the Angular styling system, which includes features such as component-level styles, template-level styles, and dynamic styles.
 
Component-level styles : You can add styles to a component by creating a styles property in the @Component decorator and specifying an array of CSS files or a string of CSS code. These styles will only be applied to the component they are associated with.
 
Template-level styles : You can add styles directly to a template by using the "style" or "styleUrls" properties in the template tag.
 
Dynamic styles : You can use Angular's template expressions and template statements to create dynamic styles. For example, you can use ngStyle and ngClass directives to bind styles and classes to a component based on conditionals.
 
It is recommended to use the component-level styles when possible, as they provide better performance and a clear structure.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [ngStyle]="{'color': myColor}">Hello World!</div>
  `,
  styles: [`
    div {
      font-size: 20px;
    }
  `]
})
export class AppComponent {
  myColor = 'blue';
}
In this example, the color of the "div" element will change to blue, by using ngStyle.
Writing unit tests in Angular involves creating test cases for individual components, services, directives, and pipes. Here's an overview of how to write a unit test in Angular :

* Create a new test file : For each component, service, directive, or pipe you want to test, create a new file with the ".spec.ts" extension. For example, if you have a component named "MyComponent", create a new file named "my.component.spec.ts".

* Import necessary dependencies : In the test file, import the dependencies needed for testing the component, service, directive, or pipe. For example, if you're testing a component that uses the HttpClient service, you would import the HttpClientModule.

* Create the test suite : Use the describe() function to create the test suite. The first argument is a string that describes what is being tested, and the second argument is a function that contains the tests.

* Write the tests : Use the it() function to write individual tests. The first argument is a string that describes the test, and the second argument is a function that contains the test code.

* Use appropriate testing functions : Angular provides a number of testing functions to help test components, services, directives, and pipes. For example, the TestBed.createComponent() function creates a new instance of a component for testing.

* Use appropriate matchers : Angular also provides a number of matchers to help check the output of your tests. For example, the expect().toEqual() matcher checks that the actual value is equal to the expected value.

* Run the tests : Use the ng test command to run the tests.

Here's an example of a simple test for a component named "MyComponent":
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    });

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});


In this example, we import the necessary testing dependencies, create a new test suite using the describe() function, create a new instance of the component using the TestBed.createComponent() function, and write a simple test using the expect().toBeTruthy() matcher to check that the component was created successfully.