Navigating the transition: 10 tips for developers switching from React to Angular

Published in

Fever Engineering

8 min readJun 26, 2024

Making the switch from React to Angular can be challenging yet rewarding journey for developers. Each framework has its own set of principles, syntax and conventions, making the transition a thoughtful process.

At Fever we prioritize hiring top tier engineers based on their skills rather than their prior experience with specific languages or frameworks. Consequently, it is not uncommon for our engineers to transition from React to Angular.

In this article, we’ll explore 10 tips that were useful for us to help developers smoothly transition from React to Angular.

Tip 01: Using ngIf structural directive

● In React, you can use conditional rendering to determine whether a component or element should be rendered. An example of how this can look:

const ConditionalComponent = ({ shouldRender }) => {
  return shouldRender ? <div>This is rendered conditionally</div> : null;
};

● In Angular, it is more common to use the structural directive *ngIf to conditionally render elements in the template, like this:

<div *ngIf="shouldRender">
  This is rendered conditionally
</div>

*Angular v17 will have a new built in control flow template syntax for if block conditionals

Tip 02: Using ngFor structural directive

● In React, you use the map function to iterate over an array and create a list of elements.

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>
          {index + 1}. {item.name}
        </li>
      ))}
    </ul>
  );
};

● In Angular you can use the structural directive *ngFor to iterate over elements in the template.

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item.name }}
  </li>
</ul>

*Angular v17 will have a new built in control flow template syntax for block repeaters

Tip 03: Improving list rendering with the help of TrackByFunction:

● In React, when you render a list of elements, you should assign a unique key property to each element. As you may know, this helps React identify each element uniquely and efficiently update the DOM.

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>
          {index + 1}. {item.name}
        </li>
      ))}
    </ul>
  );
};

● In Angular you can achieve the same result using the trackBy function:

import { Component } from '@angular/core';

interface ListItem {
  id: number;
  name: string;
}

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  `,
})
export class ListComponent {
  items: Array<ListItem> = [ 
    { id: 1, name: 'Item 1' }, 
    { id: 2, name: 'Item 2' }
  ];

  trackByFn(index: number, item: ListItem): number {
    return item.id; // Return a unique identifier for each item
  }
}

Tip 04: Property binding

● In React data is passed from a parent component to a child component as props. The child component receives and uses these props to render.

import React from 'react';

const ImageComponent = ({ imageUrl }) => {
  return <img src={imageUrl} alt="React Image" />;
};

export default ImageComponent;

● Angular uses property binding with the square bracket syntax to bind a property from the component to an HTML element property or directive.

<img [src]="imageUrl" alt="Angular Image" />

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<img [src]="imageUrl" alt="Angular Image" />',
})
export class ExampleComponent {
  @Input() imageUrl: string;
}

Tip 05: Event Binding

● In React, the equivalent functionality can be achieved using props to pass callback functions

const ChildComponent = ({ onCustomEvent }) => (
  <button onClick={onCustomEvent}>Click me</button>
);

const App = () => {
  const [message, setMessage] = useState('');

  const handleCustomEvent = () => {...};

  return (
    <ChildComponent onCustomEvent={handleCustomEvent} />
  );
};

● In Angular, event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

@Component({
  selector: 'app-child',
  template: `
    <button (click)="doSomething()">Click me</button>
  `,
})
export class ChildComponent {
  doSomething() {...}
}

In case you want to send data to a parent component you can use The @Output() decorator in a child component. The property with this decorator must have the type of EventEmitter which is used to emit custom events

@Component({
  selector: 'app-child',
  template: `
    <button (click)="customEvent.emit()">Click me</button>
  `,
})
export class ChildComponent {
  @Output() customEvent: EventEmitter<void> = new EventEmitter<void>();
}

@Component({
  selector: 'app-root',
  template: `<app-child (customEvent)="handleCustomEvent()"></app-child>`,
})
export class AppComponent {
  handleCustomEvent(): void {...}
}

Tip 06: Dependency Injection

● In React, there are some common approaches to manage dependency injection, they are:

Props
Context API
Higher-Order Components (HOCs)
Render Props
React Hooks

● In Angular, dependency injection is a core part of the framework. Angular provides an injector that is responsible for creating and managing instances of services. Here’s a simple example:

@Injectable({
  providedIn: 'root',
})
export class MyService {
  getData(): string {
    return 'Data from Angular service';
  }
}

@Component({
  selector: 'app-root',
  template: `<p>{{ message }}</p>`,
})
export class AppComponent implements OnInit {
  message: string;
  private readonly myService = inject(MyService);

  ngOnInit(): void {
    this.message = this.myService.getData();
  }
}

Tip 07: Resolver

● React does not have a direct equivalent to Angular’s resolver feature, data fetching is typically handled within the component itself or with the help of lifecycle methods, hooks, or external libraries. Here’s a simplified example using a custom hook in a React component:

const useCustomHook = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []); // Empty dependency array ensures the effect runs only once on mount
return data
}

const MyComponent = () => {
  const {data} = useCustomHook()
  return (
    <div>
      {data ? (
        <p>Data from React component: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};
export default MyComponent;

● In Angular, resolvers are used to fetch data before a route is activated, ensuring that the required data is available before rendering the corresponding component.

@Injectable({
  providedIn: 'root',
})
export class MyDataResolver implements Resolve<string> {
  private readonly myDataService = inject(MyDataService);

  resolve(): Observable<string> {
    return this.myDataService.fetchData();
  }
}

const routes: Routes = [
  {
    path: 'my-route',
    component: MyComponent,
    resolve: {
      myData: MyDataResolver,
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Tip 08: Interceptors

● In React we can achieve the http interceptor feature through state management middlewares, like Redux. Middleware intercepts actions before they reach the reducer and can modify them, dispatch new actions, or perform asynchronous operations. Here’s a simplified example using Redux middleware:

const myMiddleware = (store) => (next) => (action) => {
  // Modify the action or perform other operations

  // For example, logging the action before it reaches the reducer
  console.log('Action:', action);

  // Pass the action to the next middleware or the reducer
  return next(action);
};

export default myMiddleware;

const store = createStore(rootReducer, applyMiddleware(myMiddleware));

export default store;

● In Angular, an interceptor is a service that can be registered with the HttpClient to intercept HTTP requests or responses. It works only for the built in HTTPClient in opposite of the middlewares in React.

Interceptors allow you to apply common behaviors or modifications globally across all HTTP requests or responses. Here's a simple example of an Angular interceptor:

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Modify the request or handle the response globally

    // For example, adding a custom header to each request
    const modifiedRequest = request.clone({
      setHeaders: { 'X-Custom-Header': 'Custom Value' },
    });

    return next.handle(modifiedRequest);
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Tip 09: Rxjs

The RxJS library provides a set of tools for working with asynchronous and event-based programming in a more declarative and composable manner. It is widely used in Angular. Here’s a brief explanation:

Observables:

An Observable is a representation of a stream of data over time.
It can emit multiple values asynchronously.
Observables can be created from various sources, including events, promises, or even manually.

Observers:

An Observer subscribes to an Observable to receive notifications about changes or new values emitted by the Observable.
Observers have three callback functions: next (handles the next value), error (handles errors), and complete (handles the completion of the Observable).

Key RxJS Operators:

map: Transforms the values emitted by an Observable using a provided function.
filter: Filters values emitted by an Observable based on a provided predicate.
mergeMap: Projects each source value to an Observable, merges the resulting Observables into one observable stream.
combineLatest: Combines the latest values from multiple Observables into a single Observable.

const App = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    // Create an Observable from button clicks
    const buttonClick$ = fromEvent(document.getElementById('myButton'), 'click');

    // Use mergeMap to handle each click event and trigger an API call
    const apiCall$ = buttonClick$.pipe(
      mergeMap(() => fetch('https://api.example.com/data')),
      mergeMap(response => response.json())
    );

    // Use map to extract the specific data you want from the API response
    const subscription = apiCall$.subscribe(
      responseData => setData(responseData.data),
      error => console.error('Error:', error)
    );

    return () => subscription.unsubscribe(); // Cleanup on component unmount
  }, []);

  return (
    <div>
      <button id="myButton">Click me</button>
      <p>{data}</p>
    </div>
  );
};

export default App;

Here you can check the full list of operators: https://rxjs.dev/guide/operators#categories-of-operators.

Tip 10: Rxjs when to unsubscribe

In Angular, it’s important to unsubscribe from observables to avoid memory leaks. Subscribing to an observable creates a connection between the observer and the observable, and this connection should be closed when it’s no longer needed. Failing to unsubscribe can lead to lingering references and memory leaks.

Here are some common scenarios where you should unsubscribe in Angular:

Component Destruction:

@Component({
  selector: 'app-my-component',
})
export class MyComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    this.subscription = someObservable.subscribe(data => {
      // Handle data
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

2. Infinite Observables:

export class MyComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  constructor(private infiniteObservableService: InfiniteObservableService) {}

  ngOnInit() {
    this.subscription = interval(1000).pipe(
      map((value) => {
        // Transform the emitted value as needed
        return value * 2;
      })
      .subscribe((data) => {
        this.infiniteData = data;
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

3. Router Events:

@Component({
  selector: 'app-my-component',
})
export class MyComponent implements OnDestroy, OnInit {
  private subscription: Subscription;
  private router = inject(Router);

  ngOnInit(): void {
    this.subscription = this.router.events.subscribe(event => {...});
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

4. AsyncPipe

In Angular, the async pipe automates the subscription to an Observable and handles the unsubscription when the component is destroyed. It simplifies the process of working with asynchronous data in templates.

To utilize the async pipe, you can directly subscribe to Observables in Angular templates and bind their emitted values seamlessly:

<div>{{ observable$ | async }}</div>

Behind the scenes, the async pipe takes care of managing the subscription and unsubscription lifecycle for you, ensuring clean resource management and preventing memory leaks.