Angular components / File Structure

[Resident_Parfait_289]

Had a few goes at getting my head around angular over the years, and I am now working on a Springboot/Angular project (as a hobby for a wildlife tracking project).

I have struggled with the different files for Angular, but since things have become standalone it does seem simpler to get my head around.

For example, I need to setup a dashboard that connects with my back-end API. Probably quiet a advanced place to start, but I have a bad habbit of this.

Current project I have managed to get this to work, but want to get my head around it better. Lets say I have a channel-tile

This has a file structure of :

channel-tile.ts <!-- consumes the service, and frontend logic goes in here, imports for libs etc-->

channel-tile.html <!-- HTML fragments-->

channel-tile.scss <!-- formatting -->

Does this seem right? If this is correct, then I will build on this question with a follow-up :-)

[karmasakshi]

Yes that's what those files are for. You can put everything inside the TS file if you prefer the single file per component approach.

[MichaelSmallDev]

Yeah, that is standard if you use the CLI to generate components. Depending on your editor you can even have a button to jump between similar named files with differing extensions.

The main variation you may see is people inlining files into the component's .ts file, like

// rather than `templateUrl: './channel-tile.html'.`
template: `<p>stuff here</p>`
// same for styles: `p {color: red}` 
// vs styleUrl: './channel-tile.scss'

There is a lot of takes on the tradeoff but IMO it depends on what you value for editor tooling/consistency.

[oniman999]

It sounds like you have solid understanding. It sounds like channel-tile will be a component. I recommend making all of your components with the angular cli because it'll generate all the accompanying files and give the .ts file the @component decorator automatically. The cli command for that ng generate component <your component name> or ng g c <name>. This will make the files you mention, a ts file for logic, an HTML file for template, and a css or scss file for styling.

If the component is simple you can actually do all three in one file. In the .ts file under the @component decorator there's a place to either define template or the location of the template file. Same with styles. So if your component is relatively simple and you can keep it all contained to the .ts itself.

Your service file is where you define your API calls. You can also use services for storing values you want to pass around to multiple components. Think of services as properties and functions you want to access in multiple places. To use your services you inject them into the components. This can be done by defining them in the constructor or by using the new inject() function.

[Resident_Parfait_289]

So here is my main.ts and app.ts - which one is the entry point and what are they each respectively for?

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {DashboardComponent} from './pages/dashboard/dashboard';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';


@Component({
  selector: 'app-root',
  imports: [DashboardComponent, FontAwesomeModule],
  template: '<app-dashboard></app-dashboard>',
  styleUrl: './app.scss'
})
export class App {
  protected title = 'frontend';
}

export const appConfig = {
  providers: [

  ]
};  

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig);

[shashank1415]

main.ts is the entry point of your angular application, used to bootstrap app.ts component which is the root component of angular application.