Is it possible to replicate, modify, or recycle a purely HTML and CSS component in Angular?

On my Angular website, I am looking to reuse a component across more than 30 pages. While the majority of the pages have similar CSS, the content inside varies. I know I can simply insert <app-example></app-example> on all the pages, using <ng-content> to display different content within each component. However, I may face challenges in the future if I want to change the CSS grid layout or make other design modifications. I believe there is a more efficient way to address this issue by creating a "default" HTML template with placeholders and a default CSS design that can be used as a base for multiple pages. This would allow me to customize each component without altering the original template. I have experimented with ng-content, ng-template, and ngTemplateOutlet, but have not found a solution yet.

I have provided a sample HTML template on StackBlitz for reference:

https://stackblitz.com/edit/angular-ivy-tss4d5?file=src/app/app.component.css

htmlcssangulardry

Answer №1

To achieve the desired outcome, it is recommended to utilize ngSwitchCase instead of ng-content. By using ngSwitchCase, you can repurpose the same component to generate different results. Essentially, a switch case is akin to nested if-else statements with a default outlet.

Fortunately, the ngswitch decorator is readily available in the angular common library and does not necessitate an additional import.

If the aforementioned approach does not align with your requirements, utilizing directives to inject content as needed is an alternative. However, this method is more intricate and involves a component factory.

For more information on both ngSwitchCase and ComponentFactory, please refer to the following links:

https://angular.io/api/common/NgSwitchCase

https://angular.io/api/core/ComponentFactory

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to change the active class using jquery?

Excuse me, can I get some help? I'm still learning html and jquery, and I've seen this question asked before, but none of the solutions seem to work for me. I'm trying to change the active class in my navbar when I click on another link. Wh ...

jqueryhtmlbootstrap-4

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

jqueryhtmlcsstwitter-bootstrapangular-ui-bootstrap

Using ngIf in Angular and eliminating components in Angular 6

Currently, I am faced with the challenge of removing the header and footer components in one specific component, but I'm unsure about how to proceed. In my approach, I consider the app component as the index.html component. Whenever I create a new com ...

htmlangular

The ngx-datatable is returning an error message stating that it cannot read the property 'indexes' of an undefined

In my project, I am using ngx-datatable version 15.0.2 and Angular version 8.1.0. Recently, I encountered the following error: ngx-logger.js:852 2019-07-30T15:04:42.930Z ERROR [main.js:4696] TypeError: Cannot read property 'indexes' of unde ...

angularangular8ngx-datatable

Having multiple template bindings on a single element is not possible. Please utilize only one attribute with the prefix "*" for </mat-header-cell>

I encountered the following error: ERROR in Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" <mat-header-cell> <mat-cell *matCellDef="let order" class="{{orderColum ...

angularangular-materialmaterial-table

Creating a customized list item design using Bootstrap 3 and incorporating div elements

I have designed a custom li element with Bootstrap 3, but I am looking to achieve something specific. . Here is my current setup- HTML- <ul class="list-group"> <li class="list-group-item" id="baal"> <div style="display: inlin ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The mobile menu dropdown link in jQuery is not functioning as expected

I am having an issue with my drop down menu links - they are not clickable. Every time I try to click on them, the menu just closes back to its original position and nothing happens. If you want to see the issue, you can check out my fiddle here. EDIT: T ...

jqueryhtmlcss

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

javascripthtmlsvgjquery-svgsvg-edit

Performing a task once elements are added to an array

I created a function that calls an API to retrieve information for each product and then stores it in an array. After looping through all the products, I want to perform an action with the array. Here is my code: newProducts: any = [] loadOfferRelated(o ...

javascriptangular

The iframe is set to take the source URL from url.com/id using the "id" parameter

Currently, I am attempting to set the src of an iframe by extracting the URL from the toolbar address. The URL consists of the domain plus an ID, which happens to be the same as the YouTube ID. For instance: www.youtube.com/watch=id In my case, my domain ...

javascripthtmliframeyoutube

Designing a fluid dropdown menu with scroll functionality for my website

I have been trying to implement a scrollable dropdown menu on my website by following various tutorials, but none of them seem to be working. Despite my efforts, the dropdown menu remains non-scrollable. HTML <li> <a href="#">Team ...

htmlcssdrop-down-menu

Is there a way to access URL parameters using a router in Angular 7?

I am facing a challenge with the Angular 7 router in understanding how to utilize the "token" get parameter from different parts of the URL. Below is the code snippet where I have defined multiple routes: const myRoutes: Routes = [ { path: 'register ...

angularangular-ui-routerangular7

Problem encountered when utilizing Bootstrap's display classes d-none, d-md-block, and d-flex

When using the bootstrap classes d-none d-md-block in the following code block, they seem to cancel out the d-flex class. I want this block to be hidden on viewports smaller than md, but I also need to apply the d-flex class for the align-self-end class ...

htmlcsstwitter-bootstrapbootstrap-5

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...

javascripthtml

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...

cssreactjsconditional-operatorconditional-renderingreact-css-modules

Is it possible to access the HTML code of an app that uses a WebView?

I recently came across a stunning android application and I am eager to explore its source code. I have observed that the app has been created using webview technology. ...

javascriptandroidhtmlwebview

HTML Input Hidden : Completely Concealed

I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...

htmlhtml-input

Trouble with the mobile layout - styling with CSS

Having an issue with the mobile view CSS. Visit: Looking to shift the navigation button to the right and widen the logo without changing its height. Any assistance would be appreciated. Thank you, ...

cssbuttonmobile

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead. After testing different touch-action values, I discovered that pi ...

javascripthtmlcss