Creating a Mobile-friendly Sidebar: A Guide to Angular 5

I've been seeing a lot of recommendations online about using Angular Material for creating a sidebar, but I'm hesitant to install an entire library just for one component.

After following the instructions provided here, I managed to develop a sidebar component that functions perfectly. The HTML code for this component is quite simple:

<div class='sidebar'>
    <ng-content></ng-content>
</div>

The majority of the opening/closing functionality is handled by the controller and the CSS styles.

However, I am now facing a new challenge where I need a form to always be visible in the desktop view (non-sidebar), but it gets confined within the collapsible sidebar when the screen width is reduced.

Many suggestions online advise duplicating the content in both the sidebar and the main layout, then controlling visibility based on screen width. Yet, this approach becomes cumbersome with forms as it requires synchronization of input variables between the duplicated instances.

I am striving to avoid duplicating my form: one version for the sidebar view and another for the non-sidebar view. Ideally, I would like to have a single <form></form> present in both locations simultaneously. However, I am struggling to find a solution for this issue.

htmlcssangular

Answer №1

If my understanding is correct, you are looking to utilize the same form template for both your sidebar view and non-sidebar view.

One approach could be to employ a ReactiveForm and establish two FormGroups for each of the different views (form_sidebar, form_nosidebar). Additionally, create another FormGroup, named myform, which will be used in your form. Then, trigger an event that dynamically switches the content of myform between the two FormGroups based on the active view.

For example:

Template:

<form [formGroup]="myform">
<input type="text" formControlName="input_1">
<input type="text" formControlName="input_2">
</form>

<button (click)="nosidebarView()">Without Sidebar View</button>
<button (click)="sidebarView()">Sidebar View</button>

Controller:

myform: FormGroup;

constructor(private builder: FormBuilder) {

}

ngOnInit(){
 myform= builder.group({
   input_1: '',
   input_2: '',
 });
}

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

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS

I am currently attempting to adjust the size of this textarea proportionally. However, when I try to increase it beyond 100% width, it only expands to the right side. I have already experimented with using margin: auto and display: block but unfortunately, ...

htmlcsspug

When the mandatory option is chosen, the scroll snap type acts similar to proximity by enforcing

My goal is to have the main hero section of the website take up the entire screen, and when the user scrolls down, they are immediately brought to the main content with the hero section no longer visible. However, I am experiencing an issue where if I do a ...

htmlcssscrollscroll-snapscroll-snap-type

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

javascriptphpjqueryhtmlajax

Display the modal in Angular 8 only after receiving the response from submitting the form

I am encountering an issue where a pop-up is being displayed immediately upon clicking the submit button in Angular 8, before receiving a response. I would like the modal to only appear after obtaining the response. Can someone assist me with achieving thi ...

javascripthtmlangulartypescriptbootstrap-modal

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

Hand over the component method as an argument to a class

One of my components, called First, is responsible for creating a new instance of a Worker class. During the creation process of this class, I intend to pass the Read method as a callback method. Once this class completes its task, it will then invoke thi ...

angulartypescript

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

New replacement for routerState.parent feature that has been deprecated in angular2

During my work with Angular 2 rc5, I encountered the following code snippet. this.router.routerState.parent(this.route).params.forEach((params: Params) => { url = params['url']; id = +params['id']; }); I had to resort to th ...

javascripthtmlangularjsangularangular2-routing

When a user accesses a page, the UI-router shows the raw code in the UI-views

I am a newcomer to utilizing ui-router and I am facing challenges with managing routing and reloading some states. Any assistance would be greatly appreciated. An overview of my index.html <html ng-app="resApp"> <head></head> < ...

htmlangularjsroutesangular-ui-router

How to make QWebView background translucent

My goal is to make the background of a QWebView element transparent. +---------------------------+ | x | Window title | <<< Hidden borders and title bar +---------------------------+ view->setWindowFlags(Qt::FramelessWindowHint); | ...

c++htmlcssqt

Is there a way to configure Angular CLI to enable loading a favicon with a content hash for its filename?

I am looking to cache my website's favicon in the same way I cache css, js, and png files by setting an expires header far into the future. However, I am struggling to figure out how to achieve this. Most resources I come across suggest using a link i ...

angularfavicon

Having trouble deploying an Angular Universal app to an AWS S3 bucket with server-side rendering (SSR

Transitioning from an Angular9 application to make it SEO friendly required me to switch to Angular Universal SSR. I followed the steps below: Ran the command: ng add @nguniversal/express-engine Ran the command: npm run dev:ssr Ran the command: npm run bu ...

angularserver-side-renderingangular-universal

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

cssrubyxmlxpathcss-selectors

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss

manipulating a dynamic value within ngModel in Angular 2

When I try to pass the params variable item.audutModel in [(ngModel)] and catch the value of [(ngModel)] with (ngModelChange)="AddAdults(item.audutModel)", it misunderstands item.audutModel as the name of a model rather than as params. I apologize for my E ...

angular

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

javascriptjquerycss

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

javascripthtmlajaxjsonhtml5-video

Prevent Duplicate Service Instances in Angular

After doing some thorough research online, I've identified the root of my issue: multiple instances of a particular service are being created. I need assistance in pinpointing and rectifying this problem within my code. The secondary service is depen ...

javascriptangulartypescriptangular6singleton

What is the best way to create a fixed contact form on specific pages?

There is a Contact Form 7 on the webpage that I want to make fixed to the right side. Initially, the form is hidden and only the form button (open) is visible. When clicked, the form should open. ...

jquerycss