Constança Melo Antunes

Constança Melo Antunes

1656702000

Como Usar O Bootstrap Datepicker Em Angular 14

 O Ng Bootstrap é desenvolvido a partir do bootstrap e fornece todas as diretivas nativas do bootstrap 3, bootstrap 4 e bootstrap 5 do Angular 14, como modelo, paginação, datepicker, botões etc. O Ng Bootstrap ajudará a usar facilmente o bootstrap ui.

Neste exemplo, simplesmente criaremos um campo de entrada com datepicker, para que você possa usá-lo em seu aplicativo angular 14. usaremos o modelo passo a passo, para que você possa entendê-lo facilmente.

Etapa 1: criar um novo aplicativo

Você pode criar facilmente seu aplicativo angular usando o comando abaixo:

ng new my-new-app

Etapa 2: instalar o Bootstrap 5

Nesta etapa, instalaremos o pacote principal do bootstrap. para que possamos usar bootstrap css, vamos instalar seguindo o comando:

npm install bootstrap --save

Agora, precisamos incluir bootstrap css como "node_modules/bootstrap/dist/css/bootstrap.min.css", então vamos adicioná-lo no arquivo angular.json.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....

Passo 3: Instale o Ng Bootstrap

Nesta etapa, instalaremos o pacote Ng Bootstrap. para que possamos usar bootstrap ui, vamos instalar seguindo o comando:

npm install --save @ng-bootstrap/ng-bootstrap

Etapa 4: Importar Módulo

Nesta etapa, precisamos importar NgbModule e FormsModule para o arquivo app.module.ts. então vamos importá-lo como abaixo:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Etapa 5: Arquivo de visualização atualizado

Agora aqui, vamos atualizar nosso arquivo html. vamos criar campos de entrada de bootstrap simples para datepicker.

então vamos colocar o código abaixo:

src/app/app.component.html

<h1>Angular 14 Bootstrap 5 Datepicker Example </h1>
  
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>
   
<hr/>
<pre>Model: {{ model | json }}</pre>

Etapa 4: use o arquivo ts do componente

Agora precisamos atualizar nosso arquivo component.ts aqui vamos escrever o código do bootstrap datepicker model, vamos atualizar conforme abaixo:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
  
  model:any;
  
  constructor() {}
    
}

Execute o aplicativo angular:

Todas as etapas necessárias foram feitas, agora você deve digitar o comando abaixo e pressionar enter para executar o aplicativo Angular:

ng serve

Agora, vá para o seu navegador da web, digite o URL fornecido e visualize a saída do aplicativo:

http://localhost:4200

Espero que possa te ajudar... 

Fonte: https://www.itsolutionstuff.com/post/angular-14-bootstrap-5-datepicker-exampleexample.html

#angular #bootstrap #datepicker 

What is GEEK

Buddha Community

Como Usar O Bootstrap Datepicker Em Angular 14
Constança Melo Antunes

Constança Melo Antunes

1656702000

Como Usar O Bootstrap Datepicker Em Angular 14

 O Ng Bootstrap é desenvolvido a partir do bootstrap e fornece todas as diretivas nativas do bootstrap 3, bootstrap 4 e bootstrap 5 do Angular 14, como modelo, paginação, datepicker, botões etc. O Ng Bootstrap ajudará a usar facilmente o bootstrap ui.

Neste exemplo, simplesmente criaremos um campo de entrada com datepicker, para que você possa usá-lo em seu aplicativo angular 14. usaremos o modelo passo a passo, para que você possa entendê-lo facilmente.

Etapa 1: criar um novo aplicativo

Você pode criar facilmente seu aplicativo angular usando o comando abaixo:

ng new my-new-app

Etapa 2: instalar o Bootstrap 5

Nesta etapa, instalaremos o pacote principal do bootstrap. para que possamos usar bootstrap css, vamos instalar seguindo o comando:

npm install bootstrap --save

Agora, precisamos incluir bootstrap css como "node_modules/bootstrap/dist/css/bootstrap.min.css", então vamos adicioná-lo no arquivo angular.json.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....

Passo 3: Instale o Ng Bootstrap

Nesta etapa, instalaremos o pacote Ng Bootstrap. para que possamos usar bootstrap ui, vamos instalar seguindo o comando:

npm install --save @ng-bootstrap/ng-bootstrap

Etapa 4: Importar Módulo

Nesta etapa, precisamos importar NgbModule e FormsModule para o arquivo app.module.ts. então vamos importá-lo como abaixo:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Etapa 5: Arquivo de visualização atualizado

Agora aqui, vamos atualizar nosso arquivo html. vamos criar campos de entrada de bootstrap simples para datepicker.

então vamos colocar o código abaixo:

src/app/app.component.html

<h1>Angular 14 Bootstrap 5 Datepicker Example </h1>
  
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>
   
<hr/>
<pre>Model: {{ model | json }}</pre>

Etapa 4: use o arquivo ts do componente

Agora precisamos atualizar nosso arquivo component.ts aqui vamos escrever o código do bootstrap datepicker model, vamos atualizar conforme abaixo:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
  
  model:any;
  
  constructor() {}
    
}

Execute o aplicativo angular:

Todas as etapas necessárias foram feitas, agora você deve digitar o comando abaixo e pressionar enter para executar o aplicativo Angular:

ng serve

Agora, vá para o seu navegador da web, digite o URL fornecido e visualize a saída do aplicativo:

http://localhost:4200

Espero que possa te ajudar... 

Fonte: https://www.itsolutionstuff.com/post/angular-14-bootstrap-5-datepicker-exampleexample.html

#angular #bootstrap #datepicker 

Christa Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Adolphus Tillman

Adolphus Tillman

1656667500

how to use bootstrap datepicker in angular 14

 Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3, bootstrap 4 and bootstrap 5 native Angular 14 directives like model, pagination, datepicker, buttons etc. Ng Bootstrap will help to easily use bootstrap ui.

In this example we will simply create one input field with datepicker, so you can use it in your angular 14 application. we will use the model step by step, so you can easily understand it.

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-new-app

Step 2: Install Bootstrap 5

In this step, we will install bootstrap core package. so we can use bootstrap css so let's install by following command:

npm install bootstrap --save

Now, we need to include bootstrap css like "node_modules/bootstrap/dist/css/bootstrap.min.css", so let's add it on angular.json file.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....

Step 3: Install Ng Bootstrap

In this step, we will install Ng Bootstrap package. so we can use bootstrap ui so let's install by following command:

npm install --save @ng-bootstrap/ng-bootstrap

Step 4: Import Module

In this step, we need to import NgbModule and FormsModule to app.module.ts file. so let's import it as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Updated View File

Now here, we will updated our html file. we will create simple bootstrap input fields for datepicker.

so let's put bellow code:

src/app/app.component.html

<h1>Angular 14 Bootstrap 5 Datepicker Example </h1>
  
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>
   
<hr/>
<pre>Model: {{ model | json }}</pre>

Step 4: Use Component ts File

Now we need to update our component.ts file here we will write code of bootstrap datepicker model, let's update as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
  
  model:any;
  
  constructor() {}
    
}

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

I hope it can help you... 

Source: https://www.itsolutionstuff.com/post/angular-14-bootstrap-5-datepicker-exampleexample.html

#angular #bootstrap #datepicker

Saul Alaniz

Saul Alaniz

1656698400

Cómo Usar El Selector De Fecha De Arranque En Angular 14

 Ng Bootstrap se desarrolló a partir de bootstrap y proporciona todas las directivas nativas de Angular 14 de bootstrap 3, bootstrap 4 y bootstrap 5 como modelo, paginación, selector de fechas, botones, etc. Ng Bootstrap ayudará a usar fácilmente la interfaz de usuario de bootstrap.

En este ejemplo, simplemente crearemos un campo de entrada con selector de fecha, para que pueda usarlo en su aplicación angular 14. Usaremos el modelo paso a paso, para que puedas entenderlo fácilmente.

Paso 1: Crear nueva aplicación

Puede crear fácilmente su aplicación angular usando el siguiente comando:

ng new my-new-app

Paso 2: Instalar Bootstrap 5

En este paso, instalaremos el paquete básico de arranque. entonces podemos usar bootstrap css, así que instalemos con el siguiente comando:

npm install bootstrap --save

Ahora, debemos incluir bootstrap css como "node_modules/bootstrap/dist/css/bootstrap.min.css", así que agréguelo en el archivo angular.json.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....

Paso 3: Instalar Bootstrap

En este paso, instalaremos el paquete Ng Bootstrap. para que podamos usar bootstrap ui, así que instalemos con el siguiente comando:

npm install --save @ng-bootstrap/ng-bootstrap

Paso 4: módulo de importación

En este paso, necesitamos importar NgbModule y FormsModule al archivo app.module.ts. así que vamos a importarlo como a continuación:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 5: Ver archivo actualizado

Ahora aquí, actualizaremos nuestro archivo html. crearemos campos de entrada de arranque simples para el selector de fechas.

así que pongamos el siguiente código:

src/app/app.component.html

<h1>Angular 14 Bootstrap 5 Datepicker Example </h1>
  
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>
   
<hr/>
<pre>Model: {{ model | json }}</pre>

Paso 4: use el archivo ts del componente

Ahora necesitamos actualizar nuestro archivo component.ts aquí, escribiremos el código del modelo de selector de fecha de arranque, actualicemos como se muestra a continuación:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
  
  model:any;
  
  constructor() {}
    
}

Ejecute la aplicación Angular:

Se han realizado todos los pasos requeridos, ahora debe escribir el siguiente comando y presionar enter para ejecutar la aplicación Angular:

ng serve

Ahora, vaya a su navegador web, escriba la URL dada y vea el resultado de la aplicación:

http://localhost:4200

Espero que te pueda ayudar... 

Fuente: https://www.itsolutionstuff.com/post/angular-14-bootstrap-5-datepicker-exampleexample.html

#angular #bootstrap #datepicker 

Roberta Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular