How to generate a component in Angular

Friday, October 3, 2025

Generating components efficiently is fundamental for building scalable Angular applications with consistent structure and proper organization. As the creator of CoreUI, a widely used open-source UI library, I’ve generated thousands of Angular components for enterprise dashboards, admin panels, and complex business applications. From my expertise, the most reliable approach is to use Angular CLI’s ng generate component command. This method ensures proper file structure, imports, and module declarations while following Angular best practices automatically.

Use ng generate component command to create new Angular components with proper structure.

ng generate component user-profile

The ng generate component command creates a complete component with TypeScript class, HTML template, CSS stylesheet, and spec file for testing. Angular CLI automatically updates the nearest module to declare the new component, making it immediately available for use. The command creates a dedicated folder with naming conventions like user-profile.component.ts, user-profile.component.html, user-profile.component.css, and user-profile.component.spec.ts. You can use the shorthand ng g c for faster typing.

Best Practice Note:

This is the same approach we use when developing CoreUI Angular components for consistent architecture. Use --skip-tests flag to skip test file generation, or --inline-template and --inline-style for simple components without separate files.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.