🤩
Windframe Import Update is finally here.

Forms

Angular Bootstrap Forms

Angular Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

The Contrast Angular Bootstrap forms have predefined form logins, form registers, form subscriptions or form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

Importing the Contrast Angular Bootstrap Forms Module

To use the Contrast Angular Bootstrap Forms component in your project you need to import FormsModule.

typescript
import {FormsModule} from '@angular/forms';

Default Form Login

To create a Contrast Angular Bootstrap Form we use nested CDBInput components on a CDBCard, this card makes up the for body. The CDBBtn for creating the form button.

We also use the CDBIcon component to put icons in your form and the CDBLink for creating links in your form.

Angular Bootstrap Form Login

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4"> Sign in </p>
</div>
<CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
<CDBInput [material]=true hint="Password" type="password"></CDBInput>
<div class="d-flex flex-wrap justify-content-center align-items-center">
<CDBInput type="checkbox"></CDBInput>
<p class="m-0">Remember me</p>
<CDBLink to="/">Forgot Password ?</CDBLink>
</div>
<CDBBtn color="dark" class="btn-block my-3 mx-0">
Sign in
</CDBBtn>
<p class="text-center">Not a member? <CDBLink class="d-inline p-0" to="/">Register</CDBLink>
</p>
<p class="text-center"> or sign in with</p>
<div class="row my-3 d-flex justify-content-center">
<CDBBtn color="white" style="box-shadow: none">
<CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" style="box-shadow: none">
<CDBIcon [fab]=true icon="twitter"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" style="box-shadow: none">
<CDBIcon [fab]=true icon="google-plus-g"></CDBIcon>
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contrast Form Login

Angular Bootstrap Form Login

html
html
<CDBCard>
<div style="background: black" class="text-center text-white">
<p class="h5 mt-2 py-4 font-weight-bold">Sign in</p>
</div>
<CDBCardBody class="mx-4">
<CDBInput label="Email" type="email"></CDBInput>
<CDBInput label="Password" type="password"></CDBInput>
<div class="mt-5 d-flex flex-wrap justify-content-center align-items-center">
<CDBCheckbox class="mr-2"></CDBCheckbox>
<p class="m-0">Remember me</p>
<CDBLink to="/">Forgot Password ?</CDBLink>
</div>
<CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
Sign in
</CDBBtn>
<p class="text-center">Not a member? <CDBLink class="d-inline p-0" to="/">Register</CDBLink>
</p>
<p class="text-center"> or sign in with</p>
<div class="row my-3 d-flex justify-content-center">
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="twitter"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="linkedin-in"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="github"></CDBIcon>
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Default Form Register

Angular Bootstrap Form Register Default

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4"> Sign up </p>
</div>
<div class="form-row mb-n4">
<div class="col">
<CDBInput [material]=true hint="First name" type="text"></CDBInput>
</div>
<div class="col">
<CDBInput [material]=true hint="Last name" type="text"></CDBInput>
</div>
</div>
<CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
<p class="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
<CDBInput [material]=true hint="Password" type="password"></CDBInput>
<CDBInput [material]=true hint="Phone number" type="text"></CDBInput>
<p class="text-muted text-center small mt-n4">Optional - for two step authentication</p>
<div class="d-flex justify-content-center align-items-center mt-4">
<CDBInput type="checkbox"></CDBInput>
<p class="m-0">Subscribe to our newsletter</p>
</div>
<CDBBtn color="dark" class="btn-block my-3 mx-0">
Sign up
</CDBBtn>
<p class="text-center"> or sign up with</p>
<div class="row mb-3 d-flex justify-content-center">
<CDBBtn color="white" class="m-0" style="box-shadow: none">
<CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" style="box-shadow: none">
<CDBIcon [fab]=true icon="twitter"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" style="box-shadow: none">
<CDBIcon [fab]=true icon="google-plus-g"></CDBIcon>
</CDBBtn>
</div>
<p class="text-center m-0">Already have an account? <CDBLink class="d-inline p-0" to="/">Sign In
</CDBLink>
</p>
<hr />
<p class="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink class="d-inline p-0"
to="/">terms of service</CDBLink>
</p>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contrast Form Register

Angular Bootstrap Form Login

html
html
<CDBCard>
<div class="text-center text-white" style="background: black">
<p class="h5 mt-2 py-4 font-weight-bold"> Sign up </p>
</div>
<CDBCardBody class="mx-4">
<div class="form-row mb-n4">
<div class="col">
<CDBInput label="First name" type="text"></CDBInput>
</div>
<div class="col">
<CDBInput label="Last name" type="text"></CDBInput>
</div>
</div>
<CDBInput label="E-mail" type="email"></CDBInput>
<p class="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
<CDBInput label="Password" type="password"></CDBInput>
<CDBInput label="Phone number" type="text"></CDBInput>
<p class="text-muted text-center small mt-n4">Optional - for two step authentication</p>
<div class="d-flex justify-content-center align-items-center mt-4">
<CDBCheckbox class="mr-2"></CDBCheckbox>
<p class="m-0">Subscribe to our newsletter</p>
</div>
<CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
Sign up
</CDBBtn>
<p class="text-center"> or sign up with</p>
<div class="row mb-3 d-flex justify-content-center">
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="twitter"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="linkedin-in"></CDBIcon>
</CDBBtn>
<CDBBtn color="white" class="m-0" [outline]=true>
<CDBIcon [fab]=true icon="github"></CDBIcon>
</CDBBtn>
</div>
<p class="text-center m-0">Already have an account? <CDBLink class="d-inline p-0" to="/">Sign In
</CDBLink>
</p>
<hr />
<p class="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink class="d-inline p-0"
to="/">terms of service</CDBLink>
</p>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Default Form Subscription

Angular Bootstrap Form Subscription

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4">Subscribe</p>
</div>
<p class="text-center mt-4 font-weight-light">Join our mailing list. We write rarely, but only the
best content.</p>
<CDBLink class="text-center p-0 font-weight-light" to="/">See the last newsletter</CDBLink>
<CDBInput [material]=true hint="Name" type="text"></CDBInput>
<CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
<CDBBtn color="dark" class="btn-block my-3 mx-0">
Subscribe
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contrast Form Submission

Angular Bootstrap Form Submission

html
html
<CDBCard>
<div class="text-center text-white" style="background: black">
<p class="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
</div>
<CDBCardBody class="mx-4">
<p class="text-center mt-2">Join our mailing list. We write rarely, but only the best content.</p>
<CDBLink class="text-center p-0" to="/">See the last newsletter</CDBLink>
<CDBInput label="Name" type="text"></CDBInput>
<CDBInput label="E-mail" type="email"></CDBInput>
<CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
Subscribe
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Default Form Contact

Angular Bootstrap Form Contact

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4"> Contact us </p>
</div>
<CDBInput [material]=true hint="Name" type="text"></CDBInput>
<CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
<p class="text-center m-0">Subject</p>
<CDBSelect [options]="option" selected="Feedback"></CDBSelect>
<CDBInput hint="Message" type="textarea"></CDBInput>
<div class="d-flex justify-content-center align-items-center mt-4">
<CDBInput [material]=true type="checkbox"></CDBInput>
<p class="m-0">Send me a copy of this message</p>
</div>
<CDBBtn color="dark" class="btn-block my-3 mx-0">
Send
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contrast Form Contact

Angular Bootstrap Form Contact

html
html
<CDBCard>
<div style="background: black" class="text-center text-white">
<p class="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
</div>
<CDBCardBody class="mx-4">
<CDBInput label="Name" type="text"></CDBInput>
<CDBInput label="E-mail" type="email"></CDBInput>
<p class="text-center m-0 text-muted">Subject</p>
<CDBSelect2 color="white" [options]="option" selected="Feedback"></CDBSelect2>
<CDBInput label="Message" type="textarea"></CDBInput>
<div class="d-flex justify-content-center align-items-center mt-4">
<CDBInput type="checkbox"></CDBInput>
<p class="m-0">Send me a copy of this message</p>
</div>
<CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
Send
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Login Form with Icons

Angular Bootstrap Form Login with Icons

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4 font-weight-bold"> Sign in </p>
</div>
<CDBInput label="E-mail" type="email" icon="envelope"></CDBInput>
<CDBInput label="Password" type="password" icon="lock"></CDBInput>
<CDBBtn color="success" class="btn-block mt-5 mx-auto">
Login
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Login Form with Outside Label

Angular Bootstrap Form Login

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-4">
<p class="h4"> Sign in </p>
</div>
<label htmlFor="defaultLoginEmail" class="text-muted m-0">
Your email
</label>
<CDBInput id="defaultLoginEmail" class="mt-n3" type="email"></CDBInput>
<label htmlFor="defaultLoginPassword" class="text-muted m-0">
Your password
</label>
<CDBInput id="defaultLoginPassword" class="mt-n3" type="password"></CDBInput>
<CDBBtn color="primary" class="btn-block mt-5 mx-auto">
Login
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Sign Up Form with Icon

Angular Bootstrap Form Sign Up with Icons

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4 font-weight-bold"> Sign up </p>
</div>
<CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
<CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
<CDBInput label="Confirm your email" type="email" icon="exclamation-triangle" iconClass="text-muted">
</CDBInput>
<CDBInput label="Your Password" type="password" icon="lock" iconClass="text-muted"></CDBInput>
<CDBBtn color="primary" class="btn-block mt-5 mx-auto">
Register
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Sign Up Form Outside Label

Angular Bootstrap Form Sign Up with Label

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4"> Sign up </p>
</div>
<label htmlFor="defaultRegisterName" class="text-muted m-0">
Your name
</label>
<CDBInput id="defaultRegisterName" class="mt-n3" type="text"></CDBInput>
<label htmlFor="defaultRegisterEmail" class="text-muted m-0">
Your email
</label>
<CDBInput id="defaultRegisterEmail" class="mt-n3" type="email"></CDBInput>
<label htmlFor="defaultRegisterEmailConfirm" class="text-muted m-0">
Confirm your email
</label>
<CDBInput id="defaultRegisterEmailConfirm" class="mt-n3" type="email"></CDBInput>
<label htmlFor="defaultRegisterPassword" class="text-muted m-0">
Your password
</label>
<CDBInput id="defaultRegisterPassword" class="mt-n3" type="password"></CDBInput>
<CDBBtn color="danger" class="btn-block mt-5 mx-auto">
Register
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Subscription Form with Icon

Angular Bootstrap Form Subscription with Icon

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4 font-weight-bold"> Subscribe </p>
</div>
<CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
<CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
<CDBBtn [outline]=true color="primary" class="btn-block mt-5 mx-auto">
Send
<CDBIcon [far]=true icon="paper-plane"></CDBIcon>
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Subscription Form with Outside Label

Angular Bootstrap Form Login

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4"> Subscribe </p>
</div>
<label htmlFor="defaultSubscribeName" class="text-muted m-0">
Your name
</label>
<CDBInput id="defaultSubscribeName" class="mt-n3" type="text"></CDBInput>
<label htmlFor="defaultSubscribeEmail" class="text-muted m-0">
Your email
</label>
<CDBInput id="defaultSubscribeEmail" class="mt-n3" type="email"></CDBInput>
<CDBBtn [outline]=true color="danger" class="btn-block mt-5 mx-auto">
Send
<CDBIcon [far]=true icon="paper-plane"></CDBIcon>
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contact Form with Icon

Angular Bootstrap Form with Icon

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-2">
<p class="h4 font-weight-bold"> Write to Us </p>
</div>
<CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
<CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
<CDBInput label="Subject" type="text" icon="tags" iconClass="text-muted"></CDBInput>
<CDBInput label="Your message" type="textarea" icon="pencil-alt" iconClass="text-muted"></CDBInput>
<CDBBtn [outline]=true color="secondary" class="btn-block mt-5 mx-auto">
Send
<CDBIcon [far]=true icon="paper-plane"></CDBIcon>
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Contact Form with Icon

Angular Bootstrap Form Login

html
html
<CDBCard>
<CDBCardBody class="mx-4">
<div class="text-center mt-4 mb-4">
<p class="h4"> Write to Us </p>
</div>
<label htmlFor="defaultContactName" class="text-muted m-0">
Your name
</label>
<CDBInput id="defaultContactName" class="mt-n3" type="text"></CDBInput>
<label htmlFor="defaultContactEmail" class="text-muted m-0">
Your email
</label>
<CDBInput id="defaultContactEmail" class="mt-n3" type="email"></CDBInput>
<label htmlFor="defaultContactSubject" class="text-muted m-0">
Subject
</label>
<CDBInput id="defaultContactSubject" class="mt-n3" type="text"></CDBInput>
<label htmlFor="defaultContactMessage" class="text-muted m-0">
Your message
</label>
<CDBInput id="defaultContactMessage" class="mt-n3" type="textarea"></CDBInput>
<CDBBtn [outline]=true color="secondary" class="btn-block mt-5 mx-auto">
Send
<CDBIcon [far]=true icon="paper-plane"></CDBIcon>
</CDBBtn>
</CDBCardBody>
</CDBCard>
typescript
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
option = [
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
];
constructor() {}
ngOnInit(): void {}
}

Form Login