FAST integrates nicely with Angular. Let's take a look at how you can set up an Angular project, starting from scratch.
Setting up the Angular project
First, you'll need to make sure that you have Node.js installed. You can learn more and download that on the official site.
With Node.js installed, you can run the following command to install the Angular CLI:
With the CLI installed, you have access to the
ng command-line interface. This can be used to create a new Angular project. For example, to create a new Angular App named "fast-angular", you would use the following command:
Follow the prompts, answering each question in turn. When the CLI completes, you should have a basic runnable Angular application.
Next, we'll install the FAST packages, along with supporting libraries. To do that, run this command from your new project folder:
Using the components
With all the basic pieces in place, let's run our app in dev mode with
ng serve --open. The Angular CLI should build your project and make it available on localhost. Right now, it displays a basic welcome message, since we haven't added any code or interesting HTML. Let's change that.
First, open your
src/main.ts file and add the following code:
This code imports the
<fast-design-system-provider> component as well as the
<fast-button> components. Once you save, the dev server will rebuild and refresh your browser. However, you still won't see anything. To get some UI showing up, we need to write some HTML that uses our components. Replace the HTML template in your
app/app.component.html file with the following markup:
Replace the code in your
app/app.component.ts file contents with this:
To allow an NgModule to contain Non-Angular element names, add the following code in your
To add a splash of style, replace the
app/app.component.css file contents with this:
Congratulations! You're now set up to use FAST and Angular!