---
title: Creating Reusable Angular Components | In Depth Guide
description: Steps to create reusable angular components for increasing efficiency and consistency across the application to save cost and time of the businesses
image: https://www.xenonstack.com/hubfs/reusable-angular-component.png
---

- [![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/)
- - Foundry
      
      Foundry
      
      Unified reasoning foundation enabling seamless orchestration, analytics, infrastructure, and trust across intelligent ecosystems

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/our-purpose-line-icon.svg) Akira AI - Reasoning and Agent Orchestration Turn models into collaborative, policy-governed agents that learn and act together](https://www.xenonstack.com/agentic-platforms/akira-ai/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/autonomous-operations-icon.svg) ElixirData - Agentic Analytics Intelligence Explainable, decision-centric analytics for measurable business outcomes](https://www.xenonstack.com/agentic-platforms/elixirdata/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/digital-immune-system-icon.svg) NexaStack - Agentic Infrastructure Automation Secure, compliant, and high-performance AI deployment across cloud, edge, and on-prem](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) MetaSecure - Trust, Compliance, and Defense Continuous assurance with AI-BOMs, risk scoring, and agentic security](https://www.xenonstack.com/agentic-platforms/metasecure/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/decision-intelligence-header-icon.svg) Neural AI – Agentic Intelligence & Autonomous Innovation AI agents for intelligent automation and adaptive innovation](https://www.xenonstack.com/agentic-platforms/neural-ai/)

      ### Reasoning Stack
      
      Powers intelligent systems with unified orchestration, adaptive analytics, scalable infrastructure, and built-in trust
      
      [See in action ![cta-arrow](https://www.elixirclaw.ai/hubfs/dropdown-assets/cta-arrow.svg)](https://www.xenonstack.com/agentic-ai/analytics-platform/)
      
      ![platfom-image](https://9471087.fs1.hubspotusercontent-na1.net/hubfs/9471087/Imported%20images/build-your-next-intelligent-workflows-banner-image.svg)
    - AI Agents
      
      AI Agents
      
      Pre-built autonomous agents designed for domain-specific intelligence, seamless integrations, and governed enterprise deployment

      By Domain

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) Agentic Operations AgentSRE and AgentOps for automated reliability and IT operations](https://www.xenonstack.com/ai-agents/agentic-operations/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Agentic Finance FinOps Agent and Budget Enforcer for optimized financial governance](https://www.xenonstack.com/ai-agents/agentic-finance/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/case-study-icon.svg) Agentic Risk and Compliance Audit Agent and Risk Assurance to automate compliance monitoring](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) Agentic Analytics Analyst Agent and Decision Advisor for AI-driven insights and strategy](https://www.xenonstack.com/ai-agents/agentic-analytics/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/developer-experience-icon.svg) Agentic Supply Chain AI-powered advisor for smart sourcing, vendor insights, and strategic procurement](https://www.xenonstack.com/ai-agents/agentic-procurement/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-serverless-application-development.svg) Agentic Security AI-driven defense delivering proactive threat detection and autonomous security orchestration](https://www.xenonstack.com/ai-agents/agentic-security/)

      By Integration

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) Snowflake AI Agents Pre-built connectors for real-time data intelligence on Snowflake](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-migration.svg) Databricks AI Agents AI agents for automated data workflows and insights on Databricks](https://www.xenonstack.com/ai-agents/databricks-ai-agents/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-application-modernization.svg) ServiceNow AI Agents AI workflows to streamline service, incident, and operations automation](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devsecops.svg) Jira/Project Management Agents AI agents for backlog grooming, sprint planning, and real-time project visibility](https://www.xenonstack.com/ai-agents/jira-agents-actions/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) SAP AI Agents AI copilots for finance, supply chain, and HR decisions across your SAP landscape](https://www.xenonstack.com/ai-agents/sap-agents-actions/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) Oracle AI Agents AI agents for financials, risk, and operations intelligence across Oracle applications](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
    - Solutions
      
      Solutions
      
      Governed AI solutions driving measurable business outcomes across operations, finance, security, and analytics

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devops.svg) ReliabilityOps — Cloud Reliability Automation Automate reliability checks and optimize uptime with continuous reasoning](https://www.xenonstack.com/ai-agents/cloudops-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-kubernetes.svg) IncidentOps — AI-Driven Site Reliability Resolve incidents faster with AI-led triage, contextual RCA, and adaptive recovery](https://www.xenonstack.com/ai-agents/sre-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-custom-software-development.svg) PlatformOps — Unified Platform Automation Unify infrastructure and AI systems with reasoning-driven automation and compliance](https://www.xenonstack.com/ai-agents/platformops-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-customer-analytics.svg) DefenseOps — Autonomous Threat Defense Detect, analyze, and neutralize threats autonomously with adaptive defense intelligence](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-business-intelligence.svg) TrustOps — Responsible AI and Continuous Governance Ensure transparency, fairness, and compliance in every AI system and decision](https://www.xenonstack.com/ai-agents/secops-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-manufacturing.svg) RiskOps — Predictive Risk Intelligence Predict, score, and mitigate risks proactively with real-time assurance intelligence](https://www.xenonstack.com/ai-agents/risk-management-aviator/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-explainable-ai.svg) FactoryOps — AI-Driven Industrial Automation Predict equipment failures and optimize production with adaptive intelligence](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) AssetOps — Automated Asset Reliability Enable predictive maintenance and optimize lifecycle performance continuously](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-infrastructure%20.svg) QualityOps — Continuous Testing Intelligence Accelerate testing cycles with autonomous validation and reasoning feedback](https://www.xenonstack.com/ai-agents/qaops-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-insurance.svg) SourcingOps — Intelligent Procurement Automate sourcing, vendor analysis, and spend insights for agile procurement](https://www.xenonstack.com/ai-agents/procurement-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-augmented-data-management.svg) DataOps — Autonomous Data Pipeline Governance Ensure reliability, detect anomalies, and self-heal data pipelines automatically](https://www.xenonstack.com/ai-agents/dataops-reimagined/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) DecisionOps — Intelligent Decisioning Deliver explainable, auditable, and measurable outcomes with reasoning AI](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
    - Industries
      
      Industries
      
      Industry blueprints showcasing agentic transformation, real-world impact, and measurable outcomes across key sectors

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-computer-vision.svg) Aerospace and Defense Autonomous flight systems and predictive maintenance powered by AI](https://www.xenonstack.com/industries/aerospace/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Banking - Finance - Payments AI governance for secure, compliant, and adaptive financial operations](https://www.xenonstack.com/industries/banking/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-retail.svg) Manufacturing and Industrial Automation Smart factories using reasoning systems for real-time quality optimization](https://www.xenonstack.com/industries/digital-manufacturing-services/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-infrastrcuture.svg) Enterprise - IT Operations AI-powered IT operations ensuring reliability, scalability, and cost efficiency](https://www.xenonstack.com/industries/enterprise-technology/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Consumer – Experience – Tech Personalized digital experiences driven by explainable and trusted AI](https://www.xenonstack.com/industries/consumer-technology/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-platform-engineering.svg) Retail and Supply Chain Autonomous retail analytics enhancing operations, engagement, and forecasting accuracy](https://www.xenonstack.com/industries/retail/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-healthcare.svg) Travel – Hospitality – Guest Experience Agentic systems delivering personalized guest journeys with contextual intelligence](https://www.xenonstack.com/industries/travel-hospitality/)
    - Resources
      
      Resources
      
      Explore insights, success stories, and learning programs that build knowledge and strengthen the AI transformation journey

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Blogs Stay updated with the latest industry trends, news, and thought leadership](https://www.xenonstack.com/blog)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/insights.svg) Insights Explore in-depth AI articles, use cases, and innovative applications](https://www.xenonstack.com/insights)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/use-case.svg) Use Cases Discover real-world applications of Agentic AI across industries](https://www.xenonstack.com/use-cases)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/scale-cloud-native-applications.svg) Case Studies Learn how organizations are achieving success with our solutions](https://xenonstack.com/case-studies)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/video.svg) Video Library Explore our collection of product demos, webinars, and AI thought leadership videos](https://www.xenonstack.com/videos/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ebook.svg) E-Books Download comprehensive e-books on AI, SRE, and more](https://www.xenonstack.com/e-book)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/presentation.svg) Presentations View our AI presentations, talks, and conference sessions on AI innovation](https://www.xenonstack.com/presentations/)
    - Company
      
      Company
      
      Discover our people, principles, and purpose driving innovation, trust, and meaningful careers in the AI era

      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-about-us.svg) About Us Discover our mission, story, and the values driving our innovation and impact](https://www.xenonstack.com/about-us/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Xenonstack Academy Enhance your skills with our comprehensive training programs and courses designed for modern tech professionals](https://www.xenonstack.com/xenonstack-academy/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Contact Us Get in touch with us for support, business inquiries, or collaboration opportunities](https://www.xenonstack.com/contact-us/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-public-safety.svg) Leadership Team Meet the visionary leaders guiding Xenonstack’s strategic direction and innovation](https://www.xenonstack.com/about-us/leadership-team/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-knowledge-graph.svg) Tao of Xenonstack Learn about the guiding principles and philosophies that shape our culture and solutions](https://www.xenonstack.com/about-us/tao-of-xenonstack/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-work.svg) How We Work Understand our collaborative approach and work culture that drive successful outcomes](https://www.xenonstack.com/about-us/how-we-work/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-grow.svg) How We Grow Explore how we nurture talent, foster innovation, and promote sustainable growth](https://www.xenonstack.com/about-us/how-we-grow/)
      
      [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-our-purpose.svg) Careers Join our growing team! Explore career opportunities to work at the forefront of innovation](https://www.xenonstack.com/careers/)
- Get Started

[![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/)

- Foundry ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [Akira AI](https://www.xenonstack.com/agentic-platforms/akira-ai/) [ElixirData](https://www.xenonstack.com/agentic-platforms/elixirdata/) [NexaStack](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [MetaSecure](https://www.xenonstack.com/agentic-platforms/metasecure/) [Neural AI](https://www.xenonstack.com/agentic-platforms/neural-ai/)
- AI Agents ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [Agentic Operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [Agentic Finance](https://www.xenonstack.com/ai-agents/agentic-finance/) [Agentic Risk and Compliance](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [Agentic Analytics](https://www.xenonstack.com/ai-agents/agentic-analytics/) [Agentic Supply Chain](https://www.xenonstack.com/ai-agents/agentic-procurement/) [Agentic Security](https://www.xenonstack.com/ai-agents/agentic-security/) [Snowflake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [Databricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [Jira/Project Management Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
- Solutions ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [ReliabilityOps](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [IncidentOps](https://www.xenonstack.com/ai-agents/sre-reimagined/) [PlatformOps](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [DefenseOps](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [TrustOps](https://www.xenonstack.com/ai-agents/secops-reimagined/) [RiskOps](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [FactoryOps](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [AssetOps](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [QualityOps](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [SourcingOps](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [DataOps](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [DecisionOps](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
- Industries ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [Aerospace and Defense](https://www.xenonstack.com/industries/aerospace/) [Banking - Finance - Payments](https://www.xenonstack.com/industries/banking/) [Manufacturing and Industrial Automation](https://www.xenonstack.com/industries/digital-manufacturing-services/) [Enterprise - IT Operations](https://www.xenonstack.com/industries/enterprise-technology/) [Consumer – Experience – Tech](https://www.xenonstack.com/industries/consumer-technology/) [Retail and Supply Chain](https://www.xenonstack.com/industries/retail/) [Travel – Hospitality – Guest Experience](https://www.xenonstack.com/industries/travel-hospitality/)
- Resources ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [Blogs](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights) [Use Cases](https://www.xenonstack.com/use-cases) [Case Studies](https://www.xenonstack.com/case-studies) [Video Library](https://www.xenonstack.com/videos/) [E-Books](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/)
- Company ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg)
  
  [About Us](https://www.xenonstack.com/about-us/) [Xenonstack Academy](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [Tao of Xenonstack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [Careers](https://www.xenonstack.com/careers/)
- Get Started

![slider-cross-icon](https://www.xenonstack.com/hubfs/slider-cross-icon.svg)

## Interested in Solving your Challenges with XenonStack Team

## Get Started

Get Started with your requirements and primary focus, that will help us to make your solution

First Name \*

Please enter a valid First Name

Last Name \*

Please enter a valid Last Name

Business Email ID \*

Please enter a valid Business Email ID

Contact Number \*

Please enter a valid Contact Number

Company \*

Please enter a valid Company Name

Industry Belongs To \*

Please Select your Industry

Banking

Fintech

Payment Providers

Wealth Management

Discrete Manufacturing

Semiconductor

Machinery Manufacturing / Automation

Appliances / Electrical / Electronics

Elevator Manufacturing

Defense & Space Manufacturing

Computers & Electronics / Industrial Machinery

Motor Vehicle Manufacturing

Food and Beverages

Distillery & Wines

Beverages

Shipping

Logistics

Mobility (EV / Public Transport)

Energy & Utilities

Hospitality

Digital Gaming Platforms

SportsTech with AI

Public Safety - Explosives

Public Safety - Firefighting

Public Safety - Surveillance

Public Safety - Others

Media Platforms

City Operations

Airlines & Aviation

Defense Warfare & Drones

Robotics Engineering

Drones Manufacturing

AI Labs for Colleges

AI MSP / Quantum / AGI Institutes

Retail Apparel and Fashion

Please select all the required fields before proceeding

Proceed Next

## Interested in Solving your Challenges with XenonStack

## Personalization

Get Started with your requirements and primary focus, that will help us to make your solution

### What is your Key focus areas? \*

AI Workflow and Operations

Data Management and Operations

AI Governance

Analytics and Insights

Observability

Security Operations

Risk and Compliance

Procurement and Supply Chain

Private Cloud AI

Vision AI

### In Which Agentic Platform and Accelerator you are Interested? \*

Akira AI - Agentic AI Platform Multi Agent System

Metasecure - Autonomous SOC

Nexastack – Build and Managed Compound AI Stack

Data Foundry

XAI – Vision and AI Platform – Visual AI Agents

Strategy Consulting

AI Managed Services

Others (Please Specify)

### Which segment does your company belong to? \*

Startup

Scale Startup

SME

Mid Enterprises

Large Enterprises

Federal Government

Non Profits

Others (Please Specify)

### At what stage is your AI use case currently in? \*

Conceptualized: Use case defined, PoC pending

POC Completed

In Production with challenges

Not yet defined

Others (Please Specify)

### What are the primary challenges in adopting AI? \*

Data Quality Issues

Data Privacy and Compliance

Aligning AI with business goals

Unclear ROI from POCs

Integration with existing ERP systems

Scalability Challenges

Moving POCs in Production

Infrastructure Limitation

High Implementation costs

Others (Please Specify)

### What kind of infrastructure does your organization currently using? \*

AWS

Microsoft Azure

GCP

IBM Cloud

Oracle Cloud

On Premises

Others (Please Specify)

### Are you using any Data platform? \*

Databricks

SnowFlake

Amazon Redshift

Azure Synapse Analytics

Microsoft Fabric

Teradata

Oracle Database

SAP Hana

Informatica

Google Cloud BigQuery

Others (Please Specify)

### Preferred Approach for AI Transformation \*

Assisted Intelligence Agents as Co-Pilot

Collaborative Intelligence Agents as AI Teammates

Autonomous Intelligence Agents – AI Agents

Agentic Actions

Agentic Process Automation

### In Which Domain your Solution/Organization belongs to in-terms of Data Privacy, Trustworthy AI \*

Internal Organization

Highly Regulated Industry (Healthcare, Financials etc)

Medium Regulated

Non Regulated

### Captcha Verification \*

captcha text

![Refresh Icon](https://www.xenonstack.com/hs-fs/hubfs/refresh.png?width=20&height=20&name=refresh.png)

Please select all the required fields

Review Previous

Submit

![green-checkmark](https://www.xenonstack.com/hubfs/green-checkmark.svg)

## your request has been submitted successfully !

Our XenonStack Team will shortly reach out to you. We are looking forward to showcase how XenonStack can transform your business.

![usecase-banner (1)](https://www.xenonstack.com/hs-fs/hubfs/usecase-banner%20(1).webp?width=1921&height=622&name=usecase-banner%20(1).webp)

[Service Design](https://www.xenonstack.com/insights/tag/service-design)

# Creating Reusable Angular Components | In Depth Guide

[Navdeep Singh Gill](https://www.xenonstack.com/insights/author/navdeep-singh-gill) | 23 September 2022

![Creating Reusable Angular Components ](https://www.xenonstack.com/hs-fs/hubfs/reusable-angular-component.png?width=1280&height=720&name=reusable-angular-component.png)

## Introduction to Reusable Angular Components

Components that define a base structure/behavior but still can be used in various contexts/ dynamic content. Every time you use a reusable component, you also have a parent component. This flexible content inside its component comes from parent content and ends up in a dedicated slot inside the component. So it is projected down to the parent component.

Examples: Buttons, Spinners/ Loaders, tab, Dropdowns, Search Bar, etc.

> The performance and the load time play an essential role in any business. Click to explore about, [Performance Optimization Techniques in Angular](https://www.xenonstack.com/blog/performance-optimization-in-angular)

## What are the levels of Reusability of a component?

- **Templating:** Reuse markups across components, Future changes are simple  
  Don't forget to update all the different implementations, e.g. Button
- **Configuration:** Props to create variation in their behavior \[loading state, disabled state\]
- **Adaptability:** Allow the child component to control our markup of the parent component (more flexible than props) \[ slot for content inside a component\]
- **Inversion:** Tell the child how to render (customize render a list of items)
- **Extension:** Extend the behavior of a component in many ways
- **Nesting:** Apply for extension through the component hierarchy. Each component extends with more specific functionality.

## Why do we use it?

- **Efficiency:** Reuse markups across components, Future changes are simple
- **Consistency:** Updating reusable components get affected everywhere it is used
- **Easy to Test:** Things become easy to test when they follow SRP

> An open-source, server-side runtime atmosphere established on Google Chrome's V8 JavaScript transformer. Click to explore about, [Node.js vs. Golang](https://www.xenonstack.com/blog/node-js-vs-golang)

## How to create Reusable Angular Components with examples?

Steps to create reusable angular components are described below:

### ng-template

- app-header.component.ts (reusable child component)
- homepage-header.component.ts (parent component)

Angular ngTemplateOutlet can be used to insert a common template in various sections of a view. Here we have inserted the homePageHeader template inside the app-header component, a reusable component where anything from a parent can be inserted into the child view using templateRef. Therefore you get customized/ modified changes from the parent component & reusable code from the child component.

UI in Browser

Welcome to Home Page

`<h4> Welcome to Home Page </h4>`

Heading

`<button>Heading</button>`

### ng-content

No reference is required like we do in the ng template. We wrap the child-reusable component selector with the content in the parent component that we want to display inside the ng-content of the child component. Same UI as we saw in the ng-template diagram

child-reusable-component.component.ts

`@Component({`  
`selector: "app-child-reusable",`  
`template: `<h1>`  
`<ng-content>`  
`</ng-content>`  
`</h1>`  
`<button>`  
`Heading Button`  
`</button>`  
`<!--Other stuff->` ``  
`})`

parent-reusable-component.component.ts

`<app-child-reusable>`  
`Xenonstack`  
`</app-child-reusable>`

- ng-content \[select\]

Select with HTML Tags :

`<widget-comp>`  
`<h2> Title </h2>`  
`<div> Some content </div>`  
`<h3> Footer <h3>`  
`</widget-comp>`

`@Component({`  
`selector: "widget-comp",`  
`template: ``  
`Displaying content from where it is called`  
`<ng-content select="h3"><ng-content>`  
`<ng-content select="div"><ng-content>`  
`<ng-content select="h2"><ng-content>`  
```  
`})`

`export class WidgetComponent {}`

Projecting content with select Title will be displayed inside h3 select, Some content inside div select & so on. Order in the parent component does not matter as select attributes in ng-content are in a specific order to display.

Similarly, we can activate the same select with class & attributes as shown below.

- By class

`<h2 class="my-header"> Title </h2>`

`<ng-content select=".header"><ng-content>`

- By attribute

`<widget-comp>`  
`<h2 header> Title </h2>`  
`<div content> Some content </div>`  
`<h3 footer> Footer <h3>`  
`</widget-comp>`

`@Component({`  
`selector: "widget-comp",`  
`template: ``  
`Displaying content from where it is called`  
`<ng-content select="[header]"><ng-content>`  
`<ng-content select="[content]"><ng-content>`  
`<ng-content select="[footer]"><ng-content>``  
`})`

`export class WidgetComponent {}`

> Angular is one of the solutions for single-page application development alongside React. Click to explore about, [Learn Angular | Perfect Guide for React Developers](https://www.xenonstack.com/blog/angular-learning-path)

### What is the difference between ng-content and ng-template?ng-content?

| **ng-content** | **ng-template** |
| --- | --- |
| The projected content lifecycle is bound to the parent lifecycle | Passed templates lifecycle are not bound to the parent lifecycle hook |
| Use ng-content for most scenarios | Use whenever you encounter ng-content inside ngIf |

### DOM Access & Manipulation

`@Component({`  
`selector: 'widget-Input',`  
`template: `<input #myInput type="text" [value]="message">``  
`})`

`export class WidgetInput {`  
`@ViewChild('myInput') input;`  
`@Input() message = "default value!";`  
`constructor(private renderer: Renderer) { }`

`ngViewAfterInit() { //after view is init`  
`this.input.nativeElement.focus();`  
`//nativeElement property may not present in old browser we use Renderer`  
`this.renderer.invokeElementMethod( //safely`  
`this.input.nativeElement,`  
`'focus'`  
`}`  
`}`

The widget input component is a simple component that manipulates entered messages or adds messages through parent components using dom-manipulation through template reference.

Note: entry components: \[ComponentName\] in modules,  
you are saying that you are going to use it somewhere in your code.  
Therefore angular compiler does not discard it to reduce bundle size.

### Create Dynamic Components with ViewContainer

`import { Component, ViewChild, ViewContainerRef} from "angular-core"`  
`@Component ({`  
`selector: 'home',`  
`template: ``  
`<button (click)="onClick()">Add Component</button>`  
`<div #container></div> ``  
`})`

`export class HomeComponent {`  
`@ViewChild('container', {read: ViewContainerRef}) container;`  
`constructor(private resolver: ComponentFactoryResolver) { }`

`ngAfterViewInit( ) {`  
`const widgetFactory = this.resolver.resolveComponentFactory(WidgetInput);`  
`this. container.createComponent(widgetFactory);`  
`this. container.createComponent(widgetFactory);`  
`const widgetRef = this.container.createComponent(widgetFactory, 2)`  
`widgetRef.instance.message = "I' m last';`  
`}`

`onClick( ) {`  
`const widgetFactory = . this.resolver.resolveComponentFactory(WidgetInput);`  
`this. container.createComponent(widgetFactory, 3);`  
`widgetRef.instance.message = "I'm fourth"`  
`}`  
`}`

We can render any component any number of times throughout template refrace & using component FactoryResolver. Here we are rendering the input-widget component again and again with a click of Add Component.

- Approach2:(Easy way using createEmbeddedView)

`import { Component, ViewChild, ViewContainerRef} from "angular-core";`

`@Component ({`  
`selector: 'home',`  
`template: ``  
`<button (click)="onClick()">Create Template</button>`  
`<template #template let-description=”description”>`  
`<h2>My template </h2>`  
`<button> My button </button>`  
`</template>`  
```  
`})`

`export class HomeComponent {`  
`@ViewChild('template') template;`  
`@ViewChild('container', {read: ViewContainerRef}) container;`  
`widgetRef;`  
`constructor() { }`

`onClick() {`  
`this.container.createEmbeddedView(this.template, {`  
`description: ‘hello World’`  
`})`  
`}`  
`}`

![Java vs Kotlin](https://www.xenonstack.com/hubfs/cloud-security-failure.png)

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs.**[Click here for our Custom AngularJS Development Services](https://www.xenonstack.com/enterprise/angularjs-development/)**

### Compound Component

It give parents more control over how the system works.

SwitchComponent is the actual checkbox button UI Component & when it is clicked, an event is fired to the ToggleButtonComponent, which stores the state of the checkbox. It updates itself & emits the toggle value. Now the toggle emitEvent is subscribed at ToggleComponent, which updates all components {ToggleOffComponent & ToggleOnComponent, ToggleButtonComponent } values through @ContentChild

- app.component.html

`<toggle (toggle)="onToggle($event)">`  
`<toggle-button></toggle-button> <!--🔘 Checkbox –->`  
`<toggle-on>🌞 Day </toggle-on>`  
`<toggle-off>🌙 Night </toggle-off>`  
`</toggle>`

- toggle.component.ts (smart component)

`import { Component, Input, Output, EventEmitter, ContentChild, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';`  
`import { ToggleOnComponent } from './toggle.on.component';`  
`import { ToggleOffComponent } from './toggle.off.component';`  
`import { ToggleButtonComponent } from './toggle.button.component';`

`@Component({`  
`selector: 'toggle',`  
`template: '<ng-content></ng-content>',`  
`})`  
`export class ToggleComponent implements AfterContentInit, OnChanges {`  
`@Input() on: boolean;`  
`@Output() toggle: EventEmitter<boolean> = new EventEmitter();`

`@ContentChild(ToggleOnComponent) toggleOn: ToggleOnComponent;`  
`@ContentChild(ToggleOffComponent) toggleOff: ToggleOffComponent;`  
`@ContentChild(ToggleButtonComponent) toggleButton: ToggleButtonComponent;`

`ngAfterContentInit() {`  
`this.toggleButton.toggle.subscribe(on => {`  
`this.on = on;`  
`this.toggle.emit(on);// emit to its parent`  
`this.update();`  
`});`  
`}`

`//if any input field (on state) change update all components`  
`ngOnChanges(changes: SimpleChanges) {`  
`const { on } = changes;`  
`if (on) {`  
`this.update();`  
`}`  
`}`

`update() {`  
`this.toggleOn.on = this.on; //changing values on component level`  
`this.toggleOff.on = this.on; //changing values on component level`  
`this.toggleButton.on = this.on; //changing values on component level`  
`}`  
`}`

The above component is responsible for subscribing data of the toggle checkbox button & notify all the components whoever needs it ToggleComponent

- toggle.button.component.ts

`import { Component, Input, Output, EventEmitter } from '@angular/core';`

`@Component({`  
`selector: 'toggle-button',`  
`template: '<switch [on]="on" (click)="onClick()" ></switch>',`  
`})`

`export class ToggleButtonComponent {`  
`@Input() on: boolean;`  
`@Output() toggle: EventEmitter<boolean> = new EventEmitter(); //toggle is subscribed at parent level`

`onClick() {`  
`this.on = !this.on;`  
`this.toggle.emit(this.on);`  
`}`  
`}`

The above component is responsible for the functionality of the toggle checkbox & contains the state of the button which is subscribed to

- switch.component.ts

`import { Component, Input } from '@angular/core';`

`@Component({`  
`selector: 'switch',`  
`templateUrl: '`  
`<div class="toggle">`  
`<input class="toggle-input" type="checkbox" />`  
`<button class="toggle-btn " . . . [ngClass]="{'toggle-btn-on': on, 'toggle-btn-off': !on}" . . [attr.aria-expanded]="on" >`  
`</button>`  
`</div>',`  
`})`  
`export class SwitchComponent {`  
`@Input() on: boolean;`  
`@Input() className: string;`  
`}`

Checkbox /toggle Button UI & changes the background to dark/ light mode

- toggle.on.component.ts

`import { Component, Input } from '@angular/core';`

`@Component({`  
`selector: 'toggle-on',`  
`template: '<ng-content *ngIf="on"></ng-content>',`  
`})`

`export class ToggleOnComponent {`  
`@Input() on: boolean;`  
`}`

Contains only day HTML template/UI, which is rendered if the property is true

- toggle.off.component.ts : renders day

`import { Component, Input } from '@angular/core';`

`@Component({`  
`selector: 'toggle-off',`  
`template: '<ng-content *ngIf="!on"></ng-content>',`  
`})`

`export class ToggleOffComponent {`  
`@Input() on: boolean;`  
`}`

Contains only night mode HTML template/UI, which is rendered if the property is true

## Conclusion

Making reusable components increases efficiency and consistency across your entire application, but that does not mean every component should be reusable. That will lead to a high coupling code which will be very hard to maintain in future.

- Explore here [How to Profile a React Application?](https://www.xenonstack.com/blog/react-profiler-applications)
- Read more about [Angular Dependency Injection](https://www.xenonstack.com/blog/angular-dependency-injection)

## Share Article

- [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/reusable-angular-components%20&body=Check%20out%20https://www.xenonstack.com/insights/reusable-angular-components)

## Table of Contents

## Share Article

- [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/reusable-angular-components)
- [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/reusable-angular-components%20&body=Check%20out%20https://www.xenonstack.com/insights/reusable-angular-components)

## Explore Related Topics

[Platform Engineering](https://www.xenonstack.com/insights/tag/platform-engineering)

[DevSecOps](https://www.xenonstack.com/insights/tag/devsecops)

[Deployment Automation](https://www.xenonstack.com/insights/tag/deployment-automation)

[Continuous Security](https://www.xenonstack.com/insights/tag/continuous-security)

[Generative AI](https://www.xenonstack.com/blog/tag/generative-ai)

[Cyber Security](https://www.xenonstack.com/insights/tag/cyber-security)

[Enterprise Cloud](https://www.xenonstack.com/insights/tag/enterprise-cloud)

[Data Science](https://www.xenonstack.com/insights/tag/data-science)

[Kubernetes](https://www.xenonstack.com/insights/tag/kubernetes)

![navdeep-singh-gill](https://www.xenonstack.com/hubfs/navdeep-gill-ceo-xenonstack.svg)

## Navdeep Singh Gill

Global CEO and Founder of XenonStack

Navdeep Singh Gill is serving as Chief Executive Officer and Product Architect at XenonStack. He holds expertise in building SaaS Platform for Decentralised Big Data management and Governance, AI Marketplace for Operationalising and Scaling. His incredible experience in AI Technologies and Big Data Engineering thrills him to write about different use cases and its approach to solutions.

[Explore More by Navdeep Singh Gill ![cta-blue-arrow](https://www.xenonstack.com/hubfs/cta-arrow-blue.svg)](https://www.xenonstack.com/insights/author/navdeep-singh-gill)

![Subscribe background](https://www.xenonstack.com/hubfs/blog-post-subscribe.svg)

## Subscribe to our Latest Technology Insights and Resources

Subscribe Now

![slider-cross-icon](https://www.xenonstack.com/hubfs/slider-cross-icon.svg)

## Get the latest articles in your inbox

Business Email ID \*

Please enter a valid Business Email ID

Company Name \*

Please enter a valid Company Name

Yes, I would like to receive the XenonStack newsletter as well as marketing emails regarding XenonStack products, services, and events. I can unsubscribe at any time.  
By registering, you confirm that you agree to the processing of your personal data by XenonStack as described in the Privacy Policy.

Subscribe Now

## Related Articles

![XOps and its Components | A Beginner's Guide](https://www.xenonstack.com/hs-fs/hubfs/xops-components.png?width=1200&height=675&name=xops-components.png)

### [XOps and its Components | A Beginner's Guide](https://www.xenonstack.com/insights/xops-components)

01 May 2023

![CSS Masking Image, Text and Animation | Complete Guide](https://www.xenonstack.com/hs-fs/hubfs/css-masking-image.png?width=1200&height=675&name=css-masking-image.png)

### [CSS Masking Image, Text and Animation | Complete Guide](https://www.xenonstack.com/insights/css-masking-image)

10 September 2024

![User Experience Design Tools and its Principles](https://www.xenonstack.com/hs-fs/hubfs/user-experience-design-principles.png?width=1200&height=675&name=user-experience-design-principles.png)

### [User Experience Design Tools and its Principles](https://www.xenonstack.com/insights/user-experience-design)

14 December 2024

![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-new-logo-release.svg)

XenonStack Agentic Foundry powers enterprise agentic systems with unified infra, analytics, workflows, and security to drive automation and compliance.

[![Youtube](https://www.xenonstack.com/hubfs/xs-footer-social-icons/youtube-icon.svg)](https://www.youtube.com/c/XenonStackOfficial) [![LinkedIn](https://www.xenonstack.com/hubfs/xs-footer-social-icons/linkedin-icon.svg)](https://www.linkedin.com/company/xenonstack/) [![Github](https://www.xenonstack.com/hubfs/xs-footer-social-icons/github-icon.svg)](https://github.com/xenonstack) [![Twitter](https://www.xenonstack.com/hubfs/xs-footer-social-icons/twitter-icon.svg)](https://twitter.com/xenonstack) [![Medium](https://www.xenonstack.com/hubfs/xs-footer-social-icons/medium-icon.svg)](https://medium.com/@xenonstack) [![Instagram](https://www.xenonstack.com/hubfs/xs-footer-social-icons/instagram-icon.svg)](https://www.instagram.com/teamxenonstack/)

![iso-9001-certified](https://www.xenonstack.com/hubfs/iso-9001-2015-certified.svg) ![iso-27001-certified](https://www.xenonstack.com/hubfs/iso-27001-2022-certified.svg) ![soc-certified](https://www.xenonstack.com/hubfs/soc-certified-org.svg) ![power-bi-partner](https://www.xenonstack.com/hubfs/power-bi-2.svg) ![kubernetes-certified-partner](https://www.xenonstack.com/hubfs/kubernetes-certified.svg)

![advance-tier-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-advanced-tier-service.svg) ![managed-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-managed-service.svg) ![ml-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-ml-competency.svg) ![devops-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-devops-competency.svg) ![amazon-kinesis-delivery](https://www.xenonstack.com/hubfs/xenonstack-competency/amazon-kinesis.svg)

## AI Engineering

[Composite AI](https://www.xenonstack.com/artificial-intelligence/composite-ai/) [Decision AI](https://www.xenonstack.com/artificial-intelligence/decision-ai/) [AI Quality](https://www.xenonstack.com/artificial-intelligence/ai-quality/) [Generative AI](https://www.xenonstack.com/artificial-intelligence/generative-ai/) [Multimodal AI](https://www.xenonstack.com/artificial-intelligence/multimodal-ai/) [AI Assurance](https://www.xenonstack.com/artificial-intelligence/explainable-ai/) [MLOps](https://www.xenonstack.com/artificial-intelligence/mlops/) [Physical AI](https://www.xenonstack.com/artificial-intelligence/physical-ai/) [Augmented Engineering](https://www.xenonstack.com/artificial-intelligence/ai-augmented-software-development/) [Generative BI](https://www.xenonstack.com/artificial-intelligence/generative-bi/)

## Data Foundry

[Streaming Data Platform](https://www.xenonstack.com/dataops/streaming-data-platform/) [Data Lakehouse](https://www.xenonstack.com/dataops/delta-lake/) [Data Catalog](https://www.xenonstack.com/dataops/data-catalog/) [Data Observability](https://www.xenonstack.com/dataops/data-observability/) [Cloud Data Warehouse](https://www.xenonstack.com/dataops/cloud-data-warehouse/) [Data Engineering](https://www.xenonstack.com/dataops/data-engineering/) [MetaData Management](https://www.xenonstack.com/dataops/metadata-management/) [Data Quality](https://www.xenonstack.com/dataops/augmented-data-quality/) [Real Time Analytics](https://www.xenonstack.com/dataops/real-time-analytics/) [Data Modernization](https://www.xenonstack.com/dataops/data-modernization/)

## Platform Engineering

[Cloud Native](https://www.xenonstack.com/cloud-native/platform-engineering/) [Automation As Code](https://www.xenonstack.com/cloud-native/automation-as-code/) [Observability](https://www.xenonstack.com/cloud-native/observability/) [FinOps](https://www.xenonstack.com/cloud-native/finops/) [Application Modernization](https://www.xenonstack.com/cloud-native/application-modernization/) [DevSecOps](https://www.xenonstack.com/cloud-native/devsecops/) [Site Reliability Engineering](https://www.xenonstack.com/cloud-native/site-reliability-engineering/) [Progressive Delivery](https://www.xenonstack.com/cloud-native/progressive-delivery/) [GitOps](https://www.xenonstack.com/cloud-native/gitops/) [Compliance as code](https://www.xenonstack.com/cloud-native/compliance-as-code/) [Value Stream Management](https://www.xenonstack.com/cloud-native/value-stream-management/) [Policy as Code](https://www.xenonstack.com/cloud-native/policy-as-code/) [Telemetry Pipeline](https://www.xenonstack.com/cloud-native/telemetry-pipeline/)

## Agentic AI

[Agentic Analytics](https://www.xenonstack.com/agentic-ai/enterprise-systems/) [Agentic AI Systems](https://www.xenonstack.com/agentic-ai/agentic-ai-system/) [Process Intelligence](https://www.xenonstack.com/agentic-ai/business-process-operations/) [Developer Experience](https://www.xenonstack.com/agentic-ai/developer-experience-platform/) [Autonomous Operations](https://www.xenonstack.com/agentic-ai/autonomous-operations/) [AI Vision at EDGE](https://www.xenonstack.com/agentic-ai/edge-and-vision-ai/) [Compound AI System](https://www.xenonstack.com/agentic-ai/compound-ai-system/) [GUI Agents](https://www.xenonstack.com/agetic-ai/gui-agents/) [CMDB Management](https://www.xenonstack.com/agentic-ai/cmdb-management/) [ITSM](https://www.xenonstack.com/agentic-ai/itsm/) [Network Automation](https://www.xenonstack.com/agentic-ai/network-automation/)

## AI Agents

[DataBricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [SnowFlake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [AWS AI Agents](https://www.xenonstack.com/ai-agents/aws-ai-agents/) [Microsoft Azure AI Agents](https://www.xenonstack.com/ai-agents/microsoft-azure-ai-agents-actions/) [SalesForce AI Agents](https://www.xenonstack.com/ai-agents/salesforce-agents-actions/) [MySQL AI Agents](https://www.xenonstack.com/ai-agents/mysql-agents-actions/) [PostgreSQL AI Agents](https://www.xenonstack.com/ai-agents/postgresql-agents-actions/) [Datadog AI Agents](https://www.xenonstack.com/ai-agents/datadog-agents-actions/) [DynaTrace AI Agents](https://www.xenonstack.com/ai-agents/dynatrace-agents-actions/) [Splunk AI Agents](https://www.xenonstack.com/ai-agents/splunk-agents-actions/) [BigQuery AI Agents](https://www.xenonstack.com/ai-agents/bigquery-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Infor AI Agents](https://www.xenonstack.com/ai-agents/infor-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) [WorkDay AI Agents](https://www.xenonstack.com/ai-agents/workday-agents-actions/) [Jira AI Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/)

## Industry

[Aerospace and Aviation](https://www.xenonstack.com/industries/aerospace/) [Financial Services](https://www.xenonstack.com/industries/banking/) [Automotive And Industrial](https://www.xenonstack.com/industries/automotive/) [Consumer Tech](https://www.xenonstack.com/industries/consumer-technology/) [Technology, Media and Telco](https://www.xenonstack.com/industries/enterprise-technology/) [Digital Supply Chain](https://www.xenonstack.com/industries/digital-supply-chain/) [Hospitality and Tourism](https://www.xenonstack.com/industries/travel-hospitality/) [Discrete Manufacturing](https://www.xenonstack.com/industries/automotive/) [Education](https://www.xenonstack.com/industries/education/) [Media and Entertainment](https://www.xenonstack.com/industries/media-entertainment/) [Oil and Gas](https://www.xenonstack.com/industries/oil-and-gas/) [Energy and Utilities](https://www.xenonstack.com/industries/energy-and-utilities/)

## Enterprise Support

[AI Managed Services](https://www.xenonstack.com/managed-services/ai-managed-services/) [Kubernetes Managed Services](https://www.xenonstack.com/managed-services/kubernetes/) [SRE as a Service](https://www.xenonstack.com/managed-services/site-reliability-engineering/) [Data Managed Services](https://www.xenonstack.com/managed-services/big-data/) [Analytics Managed Services](https://www.xenonstack.com/managed-services/analytics-managed-services/) [Data Protection](https://www.xenonstack.com/readiness-assessment/data-protection/) [On-Premise AI](https://www.xenonstack.com/managed-services/on-premise-ai-cluster/)

## Solutions

[Private Cloud](https://www.xenonstack.com/solutions/private-cloud/) [Internal Developer Platform](https://www.xenonstack.com/solutions/internal-developer-platform/) [AI Inference](https://www.xenonstack.com/solutions/ai-inference/) [Open-Source Data Platform](https://www.xenonstack.com/solutions/open-source-data-platform/) [AI Trust Score](https://www.xenonstack.com/solutions/ai-trust-score/) [Autonomous SoC](https://www.xenonstack.com/solutions/autonomous-soc/) [Digital Twin](https://www.xenonstack.com/solutions/digital-twin/) [Readiness Assessment](https://www.xenonstack.com/readiness-assessment/) [Talk To Specialist](https://www.xenonstack.com/talk-to-specialist/)

## Company

[About Us](https://www.xenonstack.com/about-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [TAO of XenonStack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [Careers](https://www.xenonstack.com/careers/) [XA - QSIR](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Book Demo](https://demo.xenonstack.com/)

## Resources

[Blog](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights/) [Use Cases](https://www.xenonstack.com/use-cases) [Case Study](https://www.xenonstack.com/case-studies) [Videos](https://www.xenonstack.com/videos/) [EBooks](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/)

@2026 XenonStack - A Stack Innovator!

[Privacy Policy](https://www.xenonstack.com/privacy-policy/) [Terms and Conditions](https://www.xenonstack.com/terms-and-conditions/)

Global Presence :

![india-flag-icon](https://www.xenonstack.com/hubfs/united-states.svg)

USA

![india-flag-icon](https://www.xenonstack.com/hubfs/uae-flag-icon.svg)

Dubai

![india-flag-icon](https://www.xenonstack.com/hubfs/india-flag-icon.svg)

India

![india-flag-icon](https://www.xenonstack.com/hubfs/united-kingdom.svg)

UK

![india-flag-icon](https://www.xenonstack.com/hubfs/australia-flag-icon.svg)

Australia

✕

## Agent SRE for Reliability and Observability Solutions

 AI continuously monitors systems for risks before they escalate. It correlates signals across logs, metrics, and traces. This ensures faster detection, fewer incidents, and stronger reliability

- ![Performance Icon](https://www.xenonstack.com/hubfs/performance.svg)Proactive detection of performance and availability issues
- ![Root Cause Icon](https://www.xenonstack.com/hubfs/root-cause.svg)Root-cause analysis across microservices and environments
- ![Remediation Icon](https://www.xenonstack.com/hubfs/remediation.svg)Automated remediation playbooks to reduce MTTR

[Explore Agent SRE](https://agentsre.ai/)

![akira-ai-banner-illustration](https://www.xenonstack.com/hubfs/akira-ai-banner-illustration.svg)

✕

## Physical Surveillance with Vision AI Agent Technology

 AI converts camera feeds into instant situational awareness. It detects unusual motion and unsafe behavior in real time. Long hours of video become searchable and summarized instantly

- ![Motion Icon](https://www.xenonstack.com/hubfs/motion.svg)Real-time detection of suspicious motion or intrusion
- ![Video Search Icon](https://www.xenonstack.com/hubfs/video-search.svg)Natural language video search and instant playback
- ![Summary Icon](https://www.xenonstack.com/hubfs/summary.svg)Smart summaries for audits, investigations, and compliance

[See Vision AI in Action](https://www.xenonstack.ai/)

![physical-surveillance](https://www.xenonstack.com/hubfs/xai-banner-image.svg)

✕

## Agentic Data Intelligence Across Your Full Data Stack

 Your data stack becomes intelligent and conversational. Agents surface insights, detect anomalies, and explain trends. Move from dashboards to autonomous, always-on analytics

- ![Connects warehouses](https://www.xenonstack.com/hubfs/data-icon.svg)Connects to warehouses, lakes, and streaming sources
- ![Question Answering](https://www.xenonstack.com/hubfs/answers.svg)Question-answering in natural language
- ![Continuous monitoring](https://www.xenonstack.com/hubfs/monitoring-2.svg)Continuous monitoring for anomalies and KPI deviations

[See in Action](https://elixirdata.co/)

![agentic-data-intelligence](https://www.xenonstack.com/hubfs/empowerment-of-analysts.svg)

✕

## Intelligent Diagnostic for Self-Healing System Automation

 Agents identify recurring failures and performance issues. They trigger workflows that resolve common problems automatically. Your infrastructure evolves into a self-healing environment

- ![Diagnostics Icon](https://www.xenonstack.com/hubfs/diagnostic.svg)Automated diagnostics for recurring errors
- ![Playbook Icon](https://www.xenonstack.com/hubfs/playbook.svg)Playbook execution: restart services, scale pods, clear queues
- ![Feedback Icon](https://www.xenonstack.com/hubfs/feedback.svg)Feedback loop for improving remediation strategies

[See in Action](https://agentanalyst.ai/)

![intelligent-diagnostic](https://www.xenonstack.com/hubfs/dataops-reimagined-banner-image.svg)

✕

## Agentic GRC - Monitoring Risk and Compliance Controls

 AI continuously checks controls and compliance posture. It detects misconfigurations and risks before they escalate. Evidence collection becomes automatic and audit-ready

- ![Controls Icon](https://www.xenonstack.com/hubfs/controls.svg)Continuous control checks across infrastructure and SaaS
- ![Audit Icon](https://www.xenonstack.com/hubfs/audit.svg)Automated evidence collection for audits
- ![Risk Icon](https://www.xenonstack.com/hubfs/risk.svg)Risk scoring and prioritized remediation recommendations

[Explore Agent GRC](https://agentgrc.ai/)

![monitoring-risk-and-compliance](https://www.xenonstack.com/hubfs/enhanced-security-measures.svg)

✕

## Agentic Finance and Procurement Intelligent Agents

 Financial and procurement workflows become proactive and insight-driven. Agents monitor spend, vendors, and contracts in real time. Approvals and sourcing decisions become faster and smarter

- ![Visibility Icon](https://www.xenonstack.com/hubfs/visibility.svg)Real-time visibility into spend and commitments
- ![Anomaly Icon](https://www.xenonstack.com/hubfs/anomaly.svg)Anomaly detection on invoices and vendor performance
- ![Workflow Icon](https://www.xenonstack.com/hubfs/workflow.svg)Intelligent workflows for approvals and sourcing decisions

[Optimize Finance & Procurement](https://www.xenonify.ai/)

![agentic-finance-and-procurement](https://www.xenonstack.com/hubfs/responsible-ai-aviators-banner-illustration.svg)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Navdeep Singh Gill",
    "url" : "https://www.xenonstack.com/insights/author/navdeep-singh-gill"
  },
  "dateModified" : "2022-09-23T20:53:30.685Z",
  "datePublished" : "2022-09-23T04:00:00.000Z",
  "headline" : "Creating Reusable Angular Components | In Depth Guide",
  "image" : [ "https://www.xenonstack.com/hubfs/reusable-angular-component.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://www.xenonstack.com/insights/reusable-angular-components",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.xenonstack.com/hubfs/Xenonstack-Serives%20-3-2-2021-10.png"
    },
    "name" : "Xenonstack Inc"
  }
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "USA",
    "addressLocality" : "Plano",
    "addressRegion" : "Texas",
    "postalCode" : "75024",
    "streetAddress" : "7700 Windrose Ave. "
  },
  "description" : "XenonStack is the #1 Data and AI foundry and technology services company to simplify and scale Enterprise and Generative AI Journeys.",
  "email" : "business@xenonstack.com",
  "logo" : "https://f.hubspotusercontent30.net/hubfs/8161231/Xenonstack-Serives%20-3-2-2021-10.png",
  "mainEntityOfPage" : {
    "@id" : "https://www.xenonstack.com/insights/reusable-angular-components",
    "@type" : "WebPage",
    "description" : "Steps to create reusable angular components for increasing efficiency and consistency across the application to save cost and time of the businesses"
  },
  "name" : "XenonStack",
  "sameAs" : [ "https://www.facebook.com/XenonStack", "https://www.linkedin.com/company/xenonstack/", "https://www.youtube.com/c/XenonStackOfficial", "https://twitter.com/xenonstack" ],
  "telephone" : "",
  "url" : "https://www.xenonstack.com/"
}
```