Angular input box with integrated datepicker icons displayed inside

Currently, I have an input field and a datepicker displayed in a row. However, I need to show an icon inside the input box instead.

Here is my code:

<div class="mb-2" style=" float: left;" class="example-full-width" class="col-6">
  <tc-form-label class="mb-1">Start Date</tc-form-label>
  <div style="display: inline-flex;align-items: baseline; box-sizing: border-box;"> <input
      placeholder="Select Date" matInput [matDatepicker]="picker" [readonly]="formCallId == '3'"
      formControlName="startDate"
      style="border-radius: 20px; background-color: #EBEBEB; height: 2.75rem; border: 2px solid #EBEBEB; outline:none;    text-indent: 1rem; font-size: 1rem; width: 8rem;">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </div>
</div>

This is how it looks currently:

https://i.sstatic.net/TJIIM.png

The goal is to place the icon inside the input boxes.

angulartypescript

Answer №1

To adjust the positioning of the icon, you can use CSS to move it accordingly. Another option is to enclose both the icon and text box within a span and apply rounded corners to the span using CSS.

For example:

Your second div provides an ideal solution for this issue. Simply transfer your styling to this div instead of the input text box.

<div class="mb-2" style=" float: left;" class="example-full-width" class="col-6">
      <tc-form-label class="mb-1">Start Date</tc-form-label>
      <div style="display: inline-flex;align-items: baseline; box-sizing: border-box;border-radius: 20px; background-color: #EBEBEB; height: 2.75rem; border: 2px solid #EBEBEB; "> <input
          placeholder="Select Date" matInput [matDatepicker]="picker" [readonly]="formCallId == '3'"
          formControlName="startDate"
          style=" outline:none;    text-indent: 1rem; font-size: 1rem; width: 8rem;">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </div>
    </div>

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

Having trouble installing plugins on Ionic 6. Every time I try, an error pops up. Any suggestions on how to proceed?

Failed to fetch plugin https://github.com/katzer/cordova-plugin-background-mode.git via registry. It seems like there is a connection issue or the plugin specification is incorrect. Please check your connection, as well as the plugin nam ...

node.jsangularcordovanpmionic-framework

Variety of editions tailored to individual clients

In my development of an Angular 6 application that I plan to distribute to multiple clients, there is a need for customization specific to each client while also maintaining common elements. My vision is to organize the directory structure as follows: /s ...

angularnpmangular-cli

Exploring the realm of Typescript custom decorators: The significance behind context

I'm currently working on a custom decorator that will execute decorated functions based on RxJS events. Everything seems to be going well so far, but I'm facing an issue when the function is executed: the context of the this object is lost. I&a ...

angulartypescriptdecoratoraop

Discover the power of debugging Typescript in Visual Studio Code with Gulp integration

I've been working on setting up an express/typescript/gulp application, and while it's functional, I'm struggling to debug it using source-maps. Here is how I've set it up: Gulp File var gulp = require('gulp'), nodemon ...

node.jsexpresstypescriptgulpgulp-sourcemaps

What could be the cause of error TS2339 popping up: "Property 'scan' is not recognized on type 'Subject<any>'?

UPDATE: It's come to my attention that there may have been a shift from chaining to piping in RxJS 6.x. Can anyone confirm? See more at: This is my introduction to working with RxJS streams. I'm attempting to create some basic ones, but encounte ...

angularrxjs

Expanding one type by utilizing it as an extension of another type

I am looking to create a custom object with predefined "base" properties, as well as additional properties. It is important for me to be able to export the type of this new object using the typeof keyword. I want to avoid having to define an interface for ...

typescripttypes

The attribute 'commentText' is not found within the 'Comment' data type

Currently, I am immersed in building a user-friendly social network application using Angular 12 for my personal educational journey. Running into an error has left me puzzled and looking for assistance. About the Application: The home page (home.compone ...

angulartypescript

What is the best way to connect an event in Angular 2?

This is an input label. <input type="text" (blur) = "obj.action"/> The obj is an object from the corresponding component, obj.action = preCheck($event). A function in the same component, preCheck(input: any) { code ....}, is being used. Will it wor ...

javascriptangularangular2-template

The functionality of Angular 8 Directives from the shared module is currently malfunctioning

Hey everyone! I've been working on creating a custom directive in Angular 8, but for some reason it's not functioning properly. Even though there are no errors shown in the browser console, I can't see any changes or output from the console. ...

angulartypescriptangular2-directives

Encountering TypeScript error in the beforeRouteUpdate hook with Vue and vue-property-decorator

I am developing an application using Vue 2 with TypeScript and vue-property-decorator. Within my component, I am utilizing the beforeRouteEnter/beforeRouteUpdate hooks. One of the methods in my component is findProjects, which I want to call within the bef ...

typescriptvue.jsvue-class-componentsvue-property-decorator

Retrieving the property of a union type comprising a void type and an unnamed type

Currently, I am working on a project involving GraphQL. In my code, I have encountered a GraphQLError object with a property named extensions. The type of this property is either void or { [key: string]: any; }. Whenever I try to access any property within ...

typescriptgraphqlapollo

Mobile devices experiencing navigation bar toggle issue

I've created this code for the navigation bar, but I'm having an issue with the hamburger icon not working on small devices. The icon is visible, but nothing happens when I try to click it. <nav class="navbar navbar-expand-lg navbar-dark ...

angularbootstrap-4uinavigationcontroller

Leverage the power of Angular's library dependency injection with the @inject

I am currently working on a project that involves a library. Within one of the classes in this library, I am attempting to provide a service using @optional, @host, and @inject decorators with an injection token. In the parent component, I have the optio ...

javascriptangulartypescriptdependency-injection

Determine if the input value is an integer using a custom validator in Angular 2

Looking for a way to validate integer inputs in an Angular2 project? I experimented with using Number(control.value), but it returns 0 for empty fields, which is not ideal. Another method I tried was parseInt(control.value,10), but it ignores spaces. For ...

javascriptvalidationangularuser-input

How to Add RouterModule to an Angular 10 Library without Ivy

I am developing a custom Angular 10 Library to be shared on a private NPM repository. I followed the instructions from Angular.io and used ng new my-workspace --create-application=false and ng generate library my-library with Angular CLI. In one of the co ...

angularnpmivy

Creating a Text Typer ReactJS component that functions properly regardless of whether or not it is used within StrictMode is no

My goal is to develop a custom Text Typer component that displays text character by character every 100ms. While it works perfectly fine in production, I encounter issues when testing it in the development environment. Despite trying various solutions, tw ...

reactjstypescriptreact-hooks

The usage of @Inject('Window') in Angular/Jasmine leads to test failures, but removing it results in code failures

Currently, I am encountering a dilemma related to using Angular's @Inject('Window') within a web API service. This particular issue arises when the Window injection is utilized in the service constructor, leading to test spec failures in the ...

angulartypescriptjasminekarma-jasmine

Can Envs in Bit be linked together?

My React environment is set up at this link: . It is configured with the following dependencies: { /** * standardize your component dependencies. * @see https://bit.dev/docs/react-env/dependencies **/ "policy": { // peer and dev ...

reactjstypescriptbit.dev

Manage thrown errors using http.post().subscribe()

There is a backend API for logging in with the possibility of returning a 401 Unauthorized error if the password provided is incorrect. I am wondering how to effectively manage and handle exceptions raised in Angular when interacting with this API. this.h ...

angulartypescriptrxjs

Tips for ensuring a program pauses until an observable is completed within an Angular application

Currently, I am working on a project using Angular. I encountered a situation where a call to the backend is made using an observable to fetch products. Below is an example of how the code appears: getProducts () : Product[] { this.http.get<[]>(this ...

angularasync-awaitangular2-observables