DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • Overcoming React Development Hurdles: A Guide for Developers
  • Why React Router 7 Is a Game-Changer for React Developers
  • Angular vs. React: Which To Choose for Front-End in 2024

Trending

  • Unlocking AI Coding Assistants Part 2: Generating Code
  • Java’s Next Act: Native Speed for a Cloud-Native World
  • It’s Not About Control — It’s About Collaboration Between Architecture and Security
  • Rethinking Recruitment: A Journey Through Hiring Practices
  1. DZone
  2. Coding
  3. JavaScript
  4. Learning Angular as a React Developer

Learning Angular as a React Developer

As a fronted developer, you can specialize in React or Angular. Here's a tutorial for developers looking to learn how to use Angular as a React developer.

By 
Lijie Ye user avatar
Lijie Ye
·
Nov. 24, 22 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
8.6K Views

Join the DZone community and get the full member experience.

Join For Free

As a front-end developer, you always get asked whether you specialize in React or Angular. These two mainstream technologies have their strengths and weaknesses, and each is more appropriate depending on the project, but in this article, we will not be discussing that. I am currently working at Apiumhub, and recently I started working in Angular. This is a quick cheat sheet for getting started in Angular as a React developer. 

Creating a Component in Angular

Let’s imagine we want to create a CustomButton component. When we create this component in React, it can look similar to this:

 
//imports

export const CustomButton = () => {
  const onClick= () => {}

  return (
<button    
        onClick={onClick}
            className=”button-class”>
         Click me
      </button>
  )
};


Where we have the name of the component, its markup, and the logic it can handle in a JSX–or TSX if we’re using a typescript–extension file.

In Angular, to create the very same component we can use the following command:

 
ng generate component custom-button


The command above will create a folder with three files inside:  ustom-button.component.html, custom-button.component.scss, and custom-button.component.ts. How does Angular handle these three files to use them as one component? The configuration of this component is in the .component.ts file. It has the @Component decorator that tells Angular how to process and instantiate the component and where to find each layer of information. This would be the same example as before in Angular:

 
//custom-button.component.html

<button
    class="button-class"
    (click)="onClick()">
    Click me
  </button>

 

//custom-button.component.ts
//imports 

@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  onClick = () => {}
}


As you can see, they look pretty similar but there are some noticeable syntax differences due to the fact that React uses JSX and Angular uses HTML for the markup:

  • In Angular, classes are set by the attribute class.
  • Angular components are visible in the browser inspector. In this example, we would see something similar to this:
 
<custom-button class=”button-class”><button>Click me</button><custom-button>


  • Notice that Angular creates an additional layer in the markup that stands for the component itself. While in React, you would see the button directly.

Adding Attributes to a Component

In React, we use props to make components customizable and dynamic. For example, we might pass on the property text=“Click me” to make the button more generic:

 
export const CustomButton = ({text}) => {
  const onClick= () => {}

  return (
<button ...>
         {text}
      </button>
  )
};


In Angular, we need to use the decorator @Input() in our .ts file and initialize it:

 
@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  @Input() text = ‘’ //Note that it is mandatory to initialise it either here or in the class constructor
  onClick = () => {}
}


And use the double braces in the HTML:

 
<button
    class="button-class"
    (click)="onClick()">
    {{ text }}
  </button>


Calling a Parent Component Function

When using a purely UI component, we might want to pass a function from the parent component to the child component. In React, it would look something like this in the child component:

 
export const CustomButton = ({onClick}) => {
  handleClick = () => {
      //some internal logic
    onClick();//function passed from the parent component
  }

  return (
<button    
        onClick={handleClick}
            className=”button-class”>
         Click me
      </button>
  )
};


In Angular, we would use the @Output() decorator:

 
@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  @Output() onClick: new EventEmitter<any>();

  handleClick = () => {
    //some logic
    this.onClick.emit()//here we can also pass the event or other data that we want to receive in the parent component
  }
}


Creating an NgModule

We now know a bit about how to create an Angular component, but where does it live in the ecosystem of Angular? When we create a component in Angular, it needs to be declared in an NgModule. An NgModule is a block of code that has its own configuration, its routing, and its dependencies specified with the @NgModule decorator, which can be lazy-loaded by the route. This may sound a bit tricky at first when you come from React, but let’s see it with an example. When we start an Angular project, it comes with a module called app.module.ts that contains the basics:

 
// imports

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}


This is the most basic NgModule:

  • The declarations array indicates what presentation components it will include, for example if we are loading our custom button in this module, we would include it here.
  • Imports: Modules that are needed to load the current module. Internally, Angular is adding the list of modules’ service providers to the application root injector. In this case, the BrowserModule has browser-specific services such as DOM rendering, sanitization, and location. 
  • Providers: List of service dependencies that the current module has. This could be a service that loads data or a service that handles authentication for example.
  • Exports: Not showing up here, but it’s an array where you might export components of the current module to be able to use them in other modules.
  • Bootstrap: The root component where Angular will insert in index.html.

Why Do We Need These Modules?

Applications are always divided into functional blocks for maintainability. In React, this division is up to the developers and there is no specific convention to follow; however, in Angular, the code can be divided into NgModules. The @NgModule decorator specifies the configuration of these parts of code, which includes its external dependencies, how its internal dependencies should be injected, and how it should be compiled. This creates cohesive blocks of code with their own UI components and routing. 

Not all modules are going to be presentational components to be shown by route. One example of a non-presentational component built-in module is the RouterModule, which is a heavily used module that Angular offers to define the existing routes and which components they should load. It allows you to track whether the current page corresponds to a specific route (RouterActiveLink) or whether a URL needs some condition to be accessed (CanActivate).

The Angular team is also working on simplifying this configuration to eventually remove the need for an NgModule and do this configuration by route, we will discuss it in the next section.

New APIs to Reduce the Need of NgModules

To improve tree-shaking and reduce complexity, Angular is working on creating new APIs where:

  • Dependency injection would be handled with providers and providers arrays directly. Instead of configuring the Angular router via RouterModule.forRoot(routes, config) in the NgModule, it could be configured in the router.
  • Bootstrapping–which is currently configured in the NgModule–would be handled by a new bootstrapApplication function.
  • importProvidersFrom function would allow compatibility with former NgModules.
  • Lazy loading components would be possible not only for NgModules but by individual components and children routes.
  • The dependencies of each route could be specified individually instead of by module.

Next Steps

Since Angular is a framework, it offers many more functionalities than React, such as the handling of forms, the routing, the requests handling, and so on, which would be very interesting to explore next if you’d like to learn more about Angular. 

As a React developer, learning Angular has given me the perspective of understanding how each technology tackles a specific problem and solves it, and it also helps to better understand the foundations of Javascript.

JavaScript AngularJS dev React (JavaScript library)

Published at DZone with permission of Lijie Ye. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • Overcoming React Development Hurdles: A Guide for Developers
  • Why React Router 7 Is a Game-Changer for React Developers
  • Angular vs. React: Which To Choose for Front-End in 2024

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!