Liz  Fernandes

Liz Fernandes

1668508381

Best Angular JS Development Company

When Google began in 2012, AngularJS was used to make beautiful web and mobile apps. A new JavaScript framework is liked by developers because it is flexible, scalable, and easy to learn. Angular is already being called the most important front-end web design technology.

Also, hiring an AngularJS development company will help you more because they will be able to guide you through the whole project based on their years of experience. Front-end web developers have used AngularJS for a wide range of projects, from simple SPAs to huge, dynamic online apps.

WPWeb Infotech is a leading AngularJS developer in India. During development and testing, their Angular.Js developers use MVC. You'll get scalable AngularJS web app development services with amazing features that can serve many business verticals. Their Angular minds use smart techniques and cutting-edge technology to create creative client products.

As the top Angular Development Company in India, they help businesses use the AngularJS framework to make web apps that are secure, scalable, high-performing, interactive, MVC-capable, and dynamic.

Partner with one of India’s best Angularjs Development Company and get the most expertise in Angular development.

#angular-js #angular #web-development #angularjs-development-company #angularjs-development-services #angular-js-development

 

Best Angular JS Development Company
Lawrence  Lesch

Lawrence Lesch

1667805979

Angularjs-styleguide: AngularJS Styleguide for Teams

AngularJS styleguide (ES2015)

Up-to-date with AngularJS 1.6 best practices. Architecture, file structure, components, one-way dataflow, lifecycle hooks.


Want an example structure as reference? Check out my component based architecture 1.5 app.


A sensible styleguide for teams by @toddmotto

This architecture and styleguide has been rewritten from the ground up for ES2015, the changes in AngularJS 1.5+ for future-upgrading your application to Angular. This guide includes new best practices for one-way dataflow, event delegation, component architecture and component routing.

You can find the old styleguide here, and the reasoning behind the new one here.

Join the Ultimate AngularJS learning experience to fully master beginner and advanced AngularJS features to build real-world apps that are fast, and scale.

Modular architecture

Each module in an Angular app is a module component. A module component is the root definition for that module that encapsulates the logic, templates, routing and child components.

Module theory

The design in the modules maps directly to our folder structure, which keeps things maintainable and predictable. We should ideally have three high-level modules: root, component and common. The root module defines the base module that bootstraps our app, and the corresponding template. We then import our component and common modules into the root module to include our dependencies. The component and common modules then require lower-level component modules, which contain our components, controllers, services, directives, filters and tests for each reusable feature.

Root module

A root module begins with a root component that defines the base element for the entire application, with a routing outlet defined, example shown using ui-view from ui-router.

// app.component.js
export const AppComponent = {
  template: `
    <header>
        Hello world
    </header>
    <div>
        <div ui-view></div>
    </div>
    <footer>
        Copyright MyApp 2016.
    </footer>
  `
};

A root module is then created, with AppComponent imported and registered with .component('app', AppComponent). Further imports for submodules (component and common modules) are made to include all components relevant for the application. You'll notice styles are also being imported here, we'll come onto this in later chapters in this guide.

// app.module.js
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
import { CommonModule } from './common/common.module';
import './app.scss';

export const AppModule = angular
  .module('app', [
    ComponentsModule,
    CommonModule,
    uiRouter
  ])
  .component('app', AppComponent)
  .name;

Component module

A Component module is the container reference for all reusable components. See above how we import ComponentsModule and inject them into the Root module, this gives us a single place to import all components for the app. These modules we require are decoupled from all other modules and thus can be moved into any other application with ease.

// components/components.module.js
import angular from 'angular';
import { CalendarModule } from './calendar/calendar.module';
import { EventsModule } from './events/events.module';

export const ComponentsModule = angular
  .module('app.components', [
    CalendarModule,
    EventsModule
  ])
  .name;

Common module

The Common module is the container reference for all application specific components, that we don't want to use in another application. This can be things like layout, navigation and footers. See above how we import CommonModule and inject them into the Root module, this gives us a single place to import all common components for the app.

// common/common.module.js
import angular from 'angular';
import { NavModule } from './nav/nav.module';
import { FooterModule } from './footer/footer.module';

export const CommonModule = angular
  .module('app.common', [
    NavModule,
    FooterModule
  ])
  .name;

Low-level modules

Low-level modules are individual component modules that contain the logic for each feature block. These will each define a module, to be imported to a higher-level module, such as a component or common module, an example below. Always remember to add the .name suffix to each export when creating a new module, not when referencing one. You'll noticed routing definitions also exist here, we'll come onto this in later chapters in this guide.

// calendar/calendar.module.js
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import { CalendarComponent } from './calendar.component';
import './calendar.scss';

export const CalendarModule = angular
  .module('calendar', [
    uiRouter
  ])
  .component('calendar', CalendarComponent)
  .config(($stateProvider, $urlRouterProvider) => {
    'ngInject';
    $stateProvider
      .state('calendar', {
        url: '/calendar',
        component: 'calendar'
      });
    $urlRouterProvider.otherwise('/');
  })
  .name;

File naming conventions

Keep it simple and lowercase, use the component name, e.g. calendar.*.js*, calendar-grid.*.js - with the name of the type of file in the middle. Use *.module.js for the module definition file, as it keeps it verbose and consistent with Angular.

calendar.module.js
calendar.component.js
calendar.service.js
calendar.directive.js
calendar.filter.js
calendar.spec.js
calendar.html
calendar.scss

Scalable file structure

File structure is extremely important, this describes a scalable and predictable structure. An example file structure to illustrate a modular component architecture.

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

The high level folder structure simply contains index.html and app/, a directory in which all our root, component, common and low-level modules live along with the markup and styles for each component.

Components

Component theory

Components are essentially templates with a controller. They are not Directives, nor should you replace Directives with Components, unless you are upgrading "template Directives" with controllers, which are best suited as a component. Components also contain bindings that define inputs and outputs for data and events, lifecycle hooks and the ability to use one-way data flow and event Objects to get data back up to a parent component. These are the new defacto standard in AngularJS 1.5 and above. Everything template and controller driven that we create will likely be a component, which may be a stateful, stateless or routed component. You can think of a "component" as a complete piece of code, not just the .component() definition Object. Let's explore some best practices and advisories for components, then dive into how you should be structuring them via stateful, stateless and routed component concepts.

Supported properties

These are the supported properties for .component() that you can/should use:

PropertySupport
bindingsYes, use '@', '<', '&' only
controllerYes
controllerAsYes, default is $ctrl
requireYes (new Object syntax)
templateYes
templateUrlYes
transcludeYes

Controllers

Controllers should only be used alongside components, never anywhere else. If you feel you need a controller, what you really need is likely a stateless component to manage that particular piece of behaviour.

Here are some advisories for using Class for controllers:

  • Drop the name "Controller", i.e. use controller: class TodoComponent {...} to aid future Angular migration
  • Always use the constructor for dependency injection purposes
  • Use ng-annotate's 'ngInject'; syntax for $inject annotations
  • If you need to access the lexical scope, use arrow functions
  • Alternatively to arrow functions, let ctrl = this; is also acceptable and may make more sense depending on the use case
  • Bind all public functions directly to the Class
  • Make use of the appropriate lifecycle hooks, $onInit, $onChanges, $postLink and $onDestroy
    • Note: $onChanges is called before $onInit, see resources section for articles detailing this in more depth
  • Use require alongside $onInit to reference any inherited logic
  • Do not override the default $ctrl alias for the controllerAs syntax, therefore do not use controllerAs anywhere

One-way dataflow and Events

One-way dataflow was introduced in AngularJS 1.5, and redefines component communication.

Here are some advisories for using one-way dataflow:

  • In components that receive data, always use one-way databinding syntax '<'
  • Do not use '=' two-way databinding syntax anymore, anywhere
  • Components that have bindings should use $onChanges to clone the one-way binding data to break Objects passing by reference and updating the parent data
  • Use $event as a function argument in the parent method (see stateful example below $ctrl.addTodo($event))
  • Pass an $event: {} Object back up from a stateless component (see stateless example below this.onAddTodo).
    • Bonus: Use an EventEmitter wrapper with .value() to mirror Angular, avoids manual $event Object creation
  • Why? This mirrors Angular and keeps consistency inside every component. It also makes state predictable.

Stateful components

Let's define what we'd call a "stateful component".

  • Fetches state, essentially communicating to a backend API through a service
  • Does not directly mutate state
  • Renders child components that mutate state
  • Also referred to as smart/container components

An example of a stateful component, complete with its low-level module definition (this is only for demonstration, so some code has been omitted for brevity):

/* ----- todo/todo.component.js ----- */
import templateUrl from './todo.html';

export const TodoComponent = {
  templateUrl,
  controller: class TodoComponent {
    constructor(TodoService) {
      'ngInject';
      this.todoService = TodoService;
    }
    $onInit() {
      this.newTodo = {
        title: '',
        selected: false
      };
      this.todos = [];
      this.todoService.getTodos().then(response => this.todos = response);
    }
    addTodo({ todo }) {
      if (!todo) return;
      this.todos.unshift(todo);
      this.newTodo = {
        title: '',
        selected: false
      };
    }
  }
};

/* ----- todo/todo.html ----- */
<div class="todo">
  <todo-form
    todo="$ctrl.newTodo"
    on-add-todo="$ctrl.addTodo($event);"></todo-form>
  <todo-list
    todos="$ctrl.todos"></todo-list>
</div>

/* ----- todo/todo.module.js ----- */
import angular from 'angular';
import { TodoComponent } from './todo.component';
import './todo.scss';

export const TodoModule = angular
  .module('todo', [])
  .component('todo', TodoComponent)
  .name;

This example shows a stateful component, that fetches state inside the controller, through a service, and then passes it down into stateless child components. Notice how there are no Directives being used such as ng-repeat and friends inside the template. Instead, data and functions are delegated into <todo-form> and <todo-list> stateless components.

Stateless components

Let's define what we'd call a "stateless component".

  • Has defined inputs and outputs using bindings: {}
  • Data enters the component through attribute bindings (inputs)
  • Data leaves the component through events (outputs)
  • Mutates state, passes data back up on-demand (such as a click or submit event)
  • Doesn't care where data comes from - it's stateless
  • Are highly reusable components
  • Also referred to as dumb/presentational components

An example of a stateless component (let's use <todo-form> as an example), complete with its low-level module definition (this is only for demonstration, so some code has been omitted for brevity):

/* ----- todo/todo-form/todo-form.component.js ----- */
import templateUrl from './todo-form.html';

export const TodoFormComponent = {
  bindings: {
    todo: '<',
    onAddTodo: '&'
  },
  templateUrl,
  controller: class TodoFormComponent {
    constructor(EventEmitter) {
        'ngInject';
        this.EventEmitter = EventEmitter;
    }
    $onChanges(changes) {
      if (changes.todo) {
        this.todo = Object.assign({}, this.todo);
      }
    }
    onSubmit() {
      if (!this.todo.title) return;
      // with EventEmitter wrapper
      this.onAddTodo(
        this.EventEmitter({
          todo: this.todo
        })
      );
      // without EventEmitter wrapper
      this.onAddTodo({
        $event: {
          todo: this.todo
        }
      });
    }
  }
};

/* ----- todo/todo-form/todo-form.html ----- */
<form name="todoForm" ng-submit="$ctrl.onSubmit();">
  <input type="text" ng-model="$ctrl.todo.title">
  <button type="submit">Submit</button>
</form>

/* ----- todo/todo-form/todo-form.module.js ----- */
import angular from 'angular';
import { TodoFormComponent } from './todo-form.component';
import './todo-form.scss';

export const TodoFormModule = angular
  .module('todo.form', [])
  .component('todoForm', TodoFormComponent)
  .value('EventEmitter', payload => ({ $event: payload }))
  .name;

Note how the <todo-form> component fetches no state, it simply receives it, mutates an Object via the controller logic associated with it, and passes it back to the parent component through the property bindings. In this example, the $onChanges lifecycle hook makes a clone of the initial this.todo binding Object and reassigns it, which means the parent data is not affected until we submit the form, alongside one-way data flow new binding syntax '<'.

Routed components

Let's define what we'd call a "routed component".

  • It's essentially a stateful component, with routing definitions
  • No more router.js files
  • We use Routed components to define their own routing logic
  • Data "input" for the component is done via the route resolve (optional, still available in the controller with service calls)

For this example, we're going to take the existing <todo> component, refactor it to use a route definition and bindings on the component which receives data (the secret here with ui-router is the resolve properties we create, in this case todoData directly map across to bindings for us). We treat it as a routed component because it's essentially a "view":

/* ----- todo/todo.component.js ----- */
import templateUrl from './todo.html';

export const TodoComponent = {
  bindings: {
    todoData: '<'
  },
  templateUrl,
  controller: class TodoComponent {
    constructor() {
      'ngInject'; // Not actually needed but best practice to keep here incase dependencies needed in the future
    }
    $onInit() {
      this.newTodo = {
        title: '',
        selected: false
      };
    }
    $onChanges(changes) {
      if (changes.todoData) {
        this.todos = Object.assign({}, this.todoData);
      }
    }
    addTodo({ todo }) {
      if (!todo) return;
      this.todos.unshift(todo);
      this.newTodo = {
        title: '',
        selected: false
      };
    }
  }
};

/* ----- todo/todo.html ----- */
<div class="todo">
  <todo-form
    todo="$ctrl.newTodo"
    on-add-todo="$ctrl.addTodo($event);"></todo-form>
  <todo-list
    todos="$ctrl.todos"></todo-list>
</div>

/* ----- todo/todo.service.js ----- */
export class TodoService {
  constructor($http) {
    'ngInject';
    this.$http = $http;
  }
  getTodos() {
    return this.$http.get('/api/todos').then(response => response.data);
  }
}

/* ----- todo/todo.module.js ----- */
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import { TodoComponent } from './todo.component';
import { TodoService } from './todo.service';
import './todo.scss';

export const TodoModule = angular
  .module('todo', [
    uiRouter
  ])
  .component('todo', TodoComponent)
  .service('TodoService', TodoService)
  .config(($stateProvider, $urlRouterProvider) => {
    'ngInject';
    $stateProvider
      .state('todos', {
        url: '/todos',
        component: 'todo',
        resolve: {
          todoData: TodoService => TodoService.getTodos()
        }
      });
    $urlRouterProvider.otherwise('/');
  })
  .name;

Directives

Directive theory

Directives gives us template, scope bindings, bindToController, link and many other things. The usage of these should be carefully considered now that .component() exists. Directives should not declare templates and controllers anymore, or receive data through bindings. Directives should be used solely for decorating the DOM. By this, it means extending existing HTML - created with .component(). In a simple sense, if you need custom DOM events/APIs and logic, use a Directive and bind it to a template inside a component. If you need a sensible amount of DOM manipulation, there is also the $postLink lifecycle hook to consider, however this is not a place to migrate all your DOM manipulation to, use a Directive if you can for non-Angular things.

Here are some advisories for using Directives:

  • Never use templates, scope, bindToController or controllers
  • Always restrict: 'A' with Directives
  • Use compile and link where necessary
  • Remember to destroy and unbind event handlers inside $scope.$on('$destroy', fn);

Recommended properties

Due to the fact directives support most of what .component() does (template directives were the original component), I'm recommending limiting your directive Object definitions to only these properties, to avoid using directives incorrectly:

PropertyUse it?Why
bindToControllerNoUse bindings in components
compileYesFor pre-compile DOM manipulation/events
controllerNoUse a component
controllerAsNoUse a component
link functionsYesFor pre/post DOM manipulation/events
multiElementYesSee docs
priorityYesSee docs
requireNoUse a component
restrictYesDefines directive usage, always use 'A'
scopeNoUse a component
templateNoUse a component
templateNamespaceYes (if you must)See docs
templateUrlNoUse a component
transcludeNoUse a component

Constants or Classes

There are a few ways to approach using ES2015 and directives, either with an arrow function and easier assignment, or using an ES2015 Class. Choose what's best for you or your team, keep in mind Angular uses Class.

Here's an example using a constant with an Arrow function an expression wrapper () => ({}) returning an Object literal (note the usage differences inside .directive()):

/* ----- todo/todo-autofocus.directive.js ----- */
import angular from 'angular';

export const TodoAutoFocus = ($timeout) => {
  'ngInject';
  return {
    restrict: 'A',
    link($scope, $element, $attrs) {
      $scope.$watch($attrs.todoAutofocus, (newValue, oldValue) => {
        if (!newValue) {
          return;
        }
        $timeout(() => $element[0].focus());
      });
    }
  }
};

/* ----- todo/todo.module.js ----- */
import angular from 'angular';
import { TodoComponent } from './todo.component';
import { TodoAutofocus } from './todo-autofocus.directive';
import './todo.scss';

export const TodoModule = angular
  .module('todo', [])
  .component('todo', TodoComponent)
  .directive('todoAutofocus', TodoAutoFocus)
  .name;

Or using ES2015 Class (note manually calling new TodoAutoFocus when registering the directive) to create the Object:

/* ----- todo/todo-autofocus.directive.js ----- */
import angular from 'angular';

export class TodoAutoFocus {
  constructor($timeout) {
    'ngInject';
    this.restrict = 'A';
    this.$timeout = $timeout;
  }
  link($scope, $element, $attrs) {
    $scope.$watch($attrs.todoAutofocus, (newValue, oldValue) => {
      if (!newValue) {
        return;
      }
      this.$timeout(() => $element[0].focus());
    });
  }
}

/* ----- todo/todo.module.js ----- */
import angular from 'angular';
import { TodoComponent } from './todo.component';
import { TodoAutofocus } from './todo-autofocus.directive';
import './todo.scss';

export const TodoModule = angular
  .module('todo', [])
  .component('todo', TodoComponent)
  .directive('todoAutofocus', ($timeout) => new TodoAutoFocus($timeout))
  .name;

Services

Service theory

Services are essentially containers for business logic that our components shouldn't request directly. Services contain other built-in or external services such as $http, that we can then inject into component controllers elsewhere in our app. We have two ways of doing services, using .service() or .factory(). With ES2015 Class, we should only use .service(), complete with dependency injection annotation using $inject.

Classes for Service

Here's an example implementation for our <todo> app using ES2015 Class:

/* ----- todo/todo.service.js ----- */
export class TodoService {
  constructor($http) {
    'ngInject';
    this.$http = $http;
  }
  getTodos() {
    return this.$http.get('/api/todos').then(response => response.data);
  }
}

/* ----- todo/todo.module.js ----- */
import angular from 'angular';
import { TodoComponent } from './todo.component';
import { TodoService } from './todo.service';
import './todo.scss';

export const TodoModule = angular
  .module('todo', [])
  .component('todo', TodoComponent)
  .service('TodoService', TodoService)
  .name;

Styles

Using Webpack we can now use import statements on our .scss files in our *.module.js to let Webpack know to include that file in our stylesheet. Doing this lets us keep our components isolated for both functionality and style; it also aligns more closely to how stylesheets are declared for use in Angular. Doing this won't isolate our styles to just that component like it does with Angular; the styles will still be usable application wide but it is more manageable and makes our applications structure easier to reason about.

If you have some variables or globally used styles like form input elements then these files should still be placed into the root scss folder. e.g. scss/_forms.scss. These global styles can then be @imported into your root module (app.module.js) stylesheet like you would normally do.

ES2015 and Tooling

ES2015

  • Use Babel to compile your ES2015+ code and any polyfills
  • Consider using TypeScript to make way for any Angular upgrades

Tooling

  • Use ui-router latest alpha (see the Readme) if you want to support component-routing
    • Otherwise you're stuck with template: '<component>' and no bindings/resolve mapping
  • Consider preloading templates into $templateCache with angular-templates or ngtemplate-loader
  • Consider using Webpack for compiling your ES2015 code and styles
  • Use ngAnnotate to automatically annotate $inject properties
  • How to use ngAnnotate with ES6

State management

Consider using Redux with AngularJS 1.5 for data management.

Resources

Documentation

For anything else, including API reference, check the AngularJS documentation.

Contributing

Open an issue first to discuss potential changes/additions. Please don't open issues for questions.

Download Details:

Author: Toddmotto
Source Code: https://github.com/toddmotto/angularjs-styleguide 

#typescript #angularjs 

Angularjs-styleguide: AngularJS Styleguide for Teams
Connor Mills

Connor Mills

1664266207

Perform CRUD Operations using AngularJS

Learn AngularJS in this course and how to use AngularJS to build a web application that can perform CRUD operations.

You'll learn:

  • Learn Angular JS and its Key features
  • Setting up visual studio code IDE and configuring Angular JS
  • Understand how to create modules
  • Learn to create a webpage Using HTML,CSS, and JavaScript
  • Learn working with Events and Forms in Angular JS
  • Angular JS Directives
  • Implementation of Angular JS AJAX and Routing
  • Learn how to use Angular JS to build a web application
  • Understanding of the working of a simple webpage

AngularJS is an open-source front-end framework for JavaScript. According to 2020 data, almost 3,70,000 websites around the world use this technology. This course will help you to explore the core features of Angular JS such as data binding, modules, dependency injection, etc. A script element can be used to add AngularJS to a web page because it is provided as a JavaScript file. An interactive website component is made with Angular JS. Due to its efficiency, simplicity, and adaptability, it is a highly favoured framework. AngularJS can be described as a structural framework for dynamic web applications in more straightforward terms. In this course, you will learn to set up a development environment to execute Angular JS and here we are using Visual Studio Code as IDE, Once the environment is configured, you will learn the features, controllers, and modules in Angular JS and also learn how to create modules. Further you will understand the MVC Architecture, Angular JS scope, filters, and services, then you will explore events and forms in Angular JS, and also learn Angular AJAX and Routing, At the end of this course, you will have a better understanding of Angular JS and you will learn how to use Angular JS to build a web application that can perform CRUD operations.

Requirements

  •    Basic knowledge of HTML5
  •    Basic knowledge of CSS3 to style the webpage
  •    Knowledge of JavaScript
  •    Understanding of the working of a simple webpage

Who this course is for:

  •    Web developers
  •    Software Developers
  •    Full Stack Developers

#angular #angularjs #webdev

Perform CRUD Operations using AngularJS
Hans  Marvin

Hans Marvin

1661957460

How To Use Mouseenter Event in Angular

In this tutorial, We''ll share How To Use Mouseenter Event in Angular

The mouseenter event allows us to trigger a behavior when the user mouses over an element. Learn more about this and other mouse events.

Angular is a framework that lets us create interactive web frontends for users. It provides us with ways to handle user interactions with input devices on the browser in a clean way.

One common thing that we have to do when we create web frontend apps is handling mouse events. In this article, we will look at how to handle mouse interaction events within an Angular app.

See more at: https://www.telerik.com/blogs/angular-basics-how-to-use-angular-mouseenter-event

#angular #angularjs

How To Use Mouseenter Event in Angular
Thierry  Perret

Thierry Perret

1661946600

Comment Utiliser L'événement Mouseenter Dans Angular

L'événement mouseenter nous permet de déclencher un comportement lorsque l'utilisateur passe la souris sur un élément. En savoir plus à ce sujet et sur d'autres événements de souris.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Il nous fournit des moyens de gérer les interactions des utilisateurs avec les périphériques d'entrée sur le navigateur de manière propre.

Une chose courante que nous devons faire lorsque nous créons des applications Web frontales est la gestion des événements de souris. Dans cet article, nous verrons comment gérer les événements d'interaction de la souris dans une application angulaire.

Événements d'entrée de la souris dans le navigateur natif

L'événement mouseenter est déclenché lorsque nous survolons un élément. Ce comportement est identique à celui de l'événement mouseover.

Cependant, l'événement mouseover se propage à tous les éléments ancêtres et envoie également l'événement à tous les descendants lorsque le pointeur est déplacé d'un descendant vers son propre espace. L'événement mouseenter remonte mais n'envoie pas l'événement aux éléments descendants.

En JavaScript simple, nous pouvons écouter l'événement natif mouseenter en appelant la addEventListenerméthode sur l'élément qui déclenche l'événement.

Par exemple, nous écrivons :

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

pour ajouter quelques éléments sur notre code HTML.

Puis nous écrivons :

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

Nous sélectionnons l'élément que nous voulons écouter pour le mouseenter avec document.querySelector.

Ensuite, nous appelons mouseTarget.addEventListenerwith mouseenteret la fonction de gestionnaire d'événements mouseenter pour écouter l'événement mouseenter sur mouseTarget.

De même, nous faisons la même chose avec l'événement mouseleave. L'événement mouseleave est déclenché lorsque le pointeur de la souris quitte l'élément.

Dans la fonction de gestionnaire d'événements mouseenter, nous définissons la mouseTargetcouleur de green. Et lorsque notre souris quitte l'élément, nous définissons mouseTargetla couleur de black.

Par conséquent, lorsque nous déplaçons le pointeur de notre souris sur "bar", nous voyons qu'il devient vert. Et lorsque nous éloignons le pointeur de notre souris de "bar", il redevient noir.

Gestion des événements Mouseenter dans les composants angulaires

Angular est livré avec une syntaxe intégrée pour gérer les événements mouseenter. L'événement mouseenter est déclenché sur un élément lorsque notre souris entre dans l'élément.

La syntaxe du modèle d'Angular a pour (mouseenter)directive de nous permettre d'exécuter du code lorsque l'événement mouseenter est déclenché sur un élément. Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

pour ajouter la onMouseEnterméthode dans la AppComponentclasse de composant qui enregistre un message.

Puis nous écrivons :

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

pour ajouter des éléments dans le modèle.

Dans le deuxième élément de section, nous ajoutons la (mouseenter)directive à onMouseEnter(). De cette façon, lorsque le pointeur de la souris entre dans le deuxième élément de la section, la onMouseEnterméthode est appelée et mouseenterenregistrée.

Nous pouvons utiliser la même logique pour exécuter du code lorsque notre souris entre dans un élément de liste.

Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

pour ajouter le namestableau de chaînes dans AppComponent. Ensuite, nous ajoutons les méthodes onMouseEnteret qui enregistrent la valeur.onMouseOutname

Ensuite, nous écrivons :

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

pour rendre un ulélément avec lides éléments à l'intérieur.

Nous rendons les entrées du namestableau avec la *ngFordirective. Et nous définissons (mouseenter)sur chaque liélément rendu pour onMouseEnter(name)appeler lorsque le pointeur onMouseEnterde namenotre souris entre dans l' liélément.

De même, nous définissons (mouseleave)to onMouseOut(name)call onMouseOutwith nameto call onMouseOutwith namelorsque le pointeur de la souris quitte l' liélément.

Par conséquent, lorsque le pointeur de notre souris se déplace sur "bob", nous voyons mouse enter bobconnecté.

Et lorsque le pointeur de notre souris quitte "bob", nous voyons mouse out bobconnecté.

Application de styles d'effet de survol avec Angular

Nous pouvons appliquer des styles lorsque nous déplaçons le pointeur de la souris sur un élément ou lorsqu'il quitte l'élément.

Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

pour changer les méthodes onMouseEnteret onMouseOutpour prendre un paramètre de type HTMLElement.

Dans ceux-ci, nous définissons la colorpropriété CSS de l' hoverNameélément HTML sur une couleur spécifique.

Ensuite, nous écrivons :

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

pour ajouter la #hoverNamevariable de référence de modèle à chaque liélément du modèle.

Les variables de référence de modèle sont affectées aux éléments afin que nous puissions les référencer ailleurs dans le modèle de composant ou dans le code de la classe de composant.

Angular peut distinguer l'élément référencé même si nous attribuons le même nom de variable à chaque élément.

Ensuite, nous définissons (mouseenter)pour onMouseEnter(hoverName)appeler onMouseEnteravec hoverNamelorsque nous déplaçons le pointeur de notre souris sur un liélément. De même, nous définissons (mouseleave)pour onMouseOut(hoverName)appeler onMouseOutavec la hoverNamevariable de référence de modèle lorsque le pointeur de notre souris quitte l' liélément.

Dans onMouseEnter, nous définissons hoverName.style.colorsur greenpour rendre le texte vert lorsque nous déplaçons le pointeur de la souris sur l' liélément avec la variable de modèle. Et dans onMouseOut, nous définissons hoverName.style.colorpour blackrendre le texte noir lorsque nous déplaçons le pointeur de notre souris sur l'élément li avec la variable de modèle.

Du coup, on devrait voir le nom que l'on survole sur la page devenir vert. Et lorsque notre souris quitte le nom, le nom redevient noir.

Le changement de couleur de l'événement Mouseenter affiche les noms passant au vert lorsqu'ils sont survolés

Nous pouvons réécrire le code de l'exemple précédent sans utiliser de variables de modèle.

Nous gardons le code dans app.component.tsle même. Ensuite, nous changeons le code enapp.component.html :

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

Nous avons supprimé la #hoverNamevariable de modèle.

Au lieu de cela, nous passons l'élément comme argument de onMouseEnteret onMouseOutméthodes en utilisant à la $event.targetplace.

$event.targetest l'élément qui a déclenché l'événement. Et $eventest l'objet événement de l'événement qui a été déclenché. L'objet d'événement est un objet d'événement de navigateur natif.

Comme nous pouvons le voir, la logique des événements du gestionnaire mouseenter et mouseleave est la même que celle de l'exemple JavaScript simple. La seule différence est que Angular nous fournit une syntaxe spéciale que nous pouvons ajouter à notre code HTML pour faire la même chose que addEventListener.

Et nos méthodes de gestionnaire d'événements se trouvent dans le code de la classe de composants au lieu de les placer n'importe où, comme nous le souhaitons, dans le code JavaScript brut.

Conclusion

Une chose que nous devons souvent faire lorsque nous créons des applications Web frontales est de gérer les événements de souris. Nous pouvons gérer facilement les événements mouseenter et mouseleave avec Angular.

La logique est la même que lorsque nous utilisons du JavaScript simple pour gérer ces événements. Angular nous fournit simplement un moyen structuré de gérer les événements de souris et de périphérique d'entrée avec des variables de modèle et des directives.

L'événement mouseenter est déclenché lorsque nous déplaçons le pointeur de notre souris sur un élément. Et l'événement mouseleave est déclenché lorsque nous éloignons le pointeur de notre souris d'un élément.

Lien : https://www.telerik.com/blogs/angular-basics-how-to-use-angular-mouseenter-event

#angular #angularjs

Comment Utiliser L'événement Mouseenter Dans Angular

Как использовать событие Mouseenter в Angular

Событие mouseenter позволяет нам инициировать поведение, когда пользователь наводит указатель мыши на элемент. Узнайте больше об этом и других событиях мыши.

Angular — это фреймворк, который позволяет нам создавать интерактивные веб-интерфейсы для пользователей. Он предоставляет нам способы обработки взаимодействия пользователя с устройствами ввода в браузере простым способом.

Одна из распространенных вещей, которую мы должны делать при создании веб-приложений, — это обработка событий мыши. В этой статье мы рассмотрим, как обрабатывать события взаимодействия с мышью в приложении Angular.

Собственные события ввода мышью в браузере

Событие mouseenter срабатывает, когда мы наводим курсор на элемент. Это поведение такое же, как и при наведении курсора мыши.

Однако событие mouseover всплывает на все элементы-предки, а также отправляет событие всем потомкам, когда указатель перемещается из одного потомка в его собственное пространство. Событие mouseenter всплывает, но не отправляет событие элементам-потомкам.

В простом JavaScript мы можем прослушивать собственное событие mouseenter, вызывая addEventListenerметод для элемента, который запускает событие.

Например, мы пишем:

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

чтобы добавить несколько элементов в наш HTML-код.

Затем пишем:

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

Мы выбираем элемент, который мы хотим прослушивать для входа с помощью мыши document.querySelector.

Затем мы вызываем mouseTarget.addEventListenerwith mouseenterи функцию обработчика события mouseenter для прослушивания события mouseenter на mouseTarget.

Точно так же мы делаем то же самое с событием mouseleave. Событие mouseleave запускается, когда указатель мыши покидает элемент.

В функции обработчика событий mouseenter мы устанавливаем mouseTargetцвет green. И когда наша мышь покидает элемент, мы устанавливаем mouseTargetцвет black.

В результате, когда мы наводим указатель мыши на «полосу», мы видим, что она становится зеленой. И когда мы отводим указатель мыши от «полосы», он снова становится черным.

Обработка событий Mouseenter в компонентах Angular

Angular поставляется со встроенным синтаксисом для обработки событий mouseenter. Событие mouseenter запускается для элемента, когда наша мышь входит в элемент.

В синтаксисе шаблона Angular есть (mouseenter)директива, позволяющая нам запускать код, когда для элемента запускается событие mouseenter. Например, мы пишем:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

чтобы добавить onMouseEnterметод в AppComponentкласс компонента, который регистрирует сообщение.

Затем пишем:

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

чтобы добавить некоторые элементы в шаблон.

Во второй элемент section мы добавляем (mouseenter)директиву onMouseEnter(). Таким образом, когда наш указатель мыши входит во второй элемент раздела, onMouseEnterметод вызывается и mouseenterрегистрируется.

Мы можем использовать ту же логику для запуска кода, когда наша мышь входит в элемент списка.

Например, мы пишем:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

чтобы добавить namesмассив строк в AppComponent. Затем мы добавляем методы onMouseEnterи onMouseOut, которые регистрируют nameзначение.

Далее пишем:

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

для визуализации ulэлемента с liэлементами внутри него.

Мы отображаем записи в namesмассиве с помощью *ngForдирективы. И мы устанавливаем (mouseenter)для каждого liвизуализируемого элемента onMouseEnter(name)вызов onMouseEnterс name, когда наш указатель мыши входит в liэлемент.

Точно так же мы устанавливаем (mouseleave)вызов с помощью , чтобы вызывать onMouseOut(name)с помощью , когда указатель мыши покидает элемент.onMouseOutnameonMouseOutnameli

Поэтому, когда наш указатель мыши перемещается над «бобом», мы видим mouse enter bobжурнал.

И когда наш указатель мыши покидает «боб», мы видим mouse out bobжурнал.

Применение стилей эффекта наведения с помощью Angular

Мы можем применять стили, когда наводим указатель мыши на элемент или когда он покидает элемент.

Например, мы пишем:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

изменить методы onMouseEnterи onMouseOutдля получения параметра типа HTMLElement.

В них мы устанавливаем colorсвойство CSS hoverNameэлемента HTML на определенный цвет.

Далее пишем:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

чтобы добавить #hoverNameссылочную переменную шаблона к каждому liэлементу в шаблоне.

Ссылочные переменные шаблона назначаются элементам, чтобы мы могли ссылаться на них в другом месте шаблона компонента или в коде класса компонента.

Angular может различать элемент, на который ссылаются, даже если мы назначаем одно и то же имя переменной для каждого элемента.

Затем мы устанавливаем (mouseenter)вызов onMouseEnter(hoverName)с onMouseEnterпомощью hoverNameпри наведении указателя мыши на liэлемент. Точно так же мы установили (mouseleave)для onMouseOut(hoverName)вызова ссылочной onMouseOutпеременной hoverNameшаблона, когда наш указатель мыши покидает liэлемент.

В onMouseEnter, мы установили hoverName.style.color, чтобы greenсделать текст зеленым, когда мы наводим указатель мыши на liэлемент с переменной шаблона. А в onMouseOut, мы установили hoverName.style.color, чтобы blackсделать текст черным, когда мы наводим указатель мыши на элемент li с переменной шаблона.

В результате мы должны увидеть, что имя, на которое мы наводим курсор на странице, становится зеленым. И когда наша мышка покинет имя, то оно снова станет черным.

Изменение цвета события Mouseenter показывает, что имена меняются на зеленый при наведении

Мы можем переписать код из предыдущего примера без использования переменных шаблона.

Мы сохраняем код в app.component.tsтом же самом. Затем мы меняем код app.component.htmlна:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

Мы удалили #hoverNameпеременную шаблона.

Вместо этого мы передаем элемент в качестве аргумента onMouseEnterи onMouseOutметодов, используя $event.targetвместо этого.

$event.targetэлемент, вызвавший событие. И $eventявляется объектом события, которое было запущено. Объект события — это собственный объект события браузера.

Как мы видим, логика обработчиков событий mouseenter и mouseleave такая же, как и в простом примере JavaScript. Единственное отличие состоит в том, что Angular предоставляет нам специальный синтаксис, который мы можем добавить в наш HTML-код, чтобы делать то же самое, что и addEventListener.

И наши методы обработчика событий находятся в коде класса компонента, а не в любом месте, как нам кажется, в простом коде JavaScript.

Вывод

Одна вещь, которую нам часто приходится делать при создании веб-приложений, — это обрабатывать события мыши. Мы можем легко обрабатывать события mouseenter и mouseleave с помощью Angular.

Логика такая же, как и при использовании простого JavaScript для обработки этих событий. Angular просто предоставляет нам структурированный способ обработки событий мыши и устройств ввода с помощью переменных и директив шаблона.

Событие mouseenter запускается, когда мы наводим указатель мыши на элемент. И событие mouseleave запускается, когда мы перемещаем указатель мыши от элемента.

Ссылка: https://www.telerik.com/blogs/angular-basics-how-to-use-angular-mouseenter-event

#angular #angularjs

Как использовать событие Mouseenter в Angular
Minh  Nguyet

Minh Nguyet

1661924880

Cách Sử Dụng Sự Kiện Mouseenter Trong Angular

Sự kiện mouseenter cho phép chúng tôi kích hoạt một hành vi khi người dùng di chuột qua một phần tử. Tìm hiểu thêm về điều này và các sự kiện chuột khác.

Angular là một khuôn khổ cho phép chúng tôi tạo các giao diện web tương tác cho người dùng. Nó cung cấp cho chúng tôi các cách để xử lý các tương tác của người dùng với các thiết bị đầu vào trên trình duyệt một cách rõ ràng.

Một điều phổ biến mà chúng ta phải làm khi tạo các ứng dụng giao diện người dùng web là xử lý các sự kiện chuột. Trong bài viết này, chúng ta sẽ xem xét cách xử lý các sự kiện tương tác chuột trong ứng dụng Angular.

Sự kiện nhập chuột trên trình duyệt gốc

Sự kiện mouseenter được kích hoạt khi chúng ta di chuột qua một phần tử. Hành vi này giống như sự kiện di chuột qua.

Tuy nhiên, sự kiện di chuột qua bong bóng tới tất cả các phần tử tổ tiên và cũng gửi sự kiện đến bất kỳ phần tử con nào khi con trỏ được di chuyển từ một phần tử con đến không gian riêng của nó. Sự kiện mouseenter hiện bong bóng nhưng không gửi sự kiện đến các phần tử con.

Trong JavaScript đơn giản, chúng ta có thể lắng nghe sự kiện mouseenter gốc bằng cách gọi addEventListenerphương thức trên phần tử kích hoạt sự kiện.

Ví dụ, chúng tôi viết:

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

để thêm một vài yếu tố vào mã HTML của chúng tôi.

Sau đó, chúng tôi viết:

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

Chúng tôi chọn phần tử mà chúng tôi muốn lắng nghe cho con trỏ chuột document.querySelector.

Sau đó, chúng tôi gọi mouseTarget.addEventListenervới mouseentervà hàm xử lý sự kiện mouseenter để lắng nghe sự kiện mouseenter mouseTarget.

Tương tự như vậy, chúng ta cũng làm như vậy với sự kiện mouseleave. Sự kiện mouseleave được kích hoạt khi con trỏ chuột rời khỏi phần tử.

Trong hàm xử lý sự kiện mouseenter, chúng tôi đặt mouseTargetmàu của 's thành green. Và khi con chuột của chúng tôi rời khỏi phần tử, chúng tôi đặt mouseTargetmàu của nó thành black.

Kết quả là, khi chúng ta di chuyển con trỏ chuột đến “thanh”, chúng ta thấy nó chuyển sang màu xanh lục. Và khi chúng ta di chuyển con trỏ chuột ra khỏi “thanh”, nó sẽ trở lại màu đen.

Xử lý sự kiện Mouseenter trong các thành phần Angular

Angular đi kèm với cú pháp tích hợp để xử lý các sự kiện mouseenter. Sự kiện mouseenter được kích hoạt trên một phần tử khi con chuột của chúng ta nhập phần tử đó.

Cú pháp mẫu của Angular có (mouseenter)chỉ thị cho phép chúng tôi chạy mã khi sự kiện mouseenter được kích hoạt trên một phần tử. Ví dụ, chúng tôi viết:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

để thêm onMouseEnterphương thức vào AppComponentlớp thành phần ghi thông báo.

Sau đó, chúng tôi viết:

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

để thêm một số yếu tố vào mẫu.

Trong phần tử phần thứ hai, chúng tôi thêm (mouseenter)chỉ thị vào onMouseEnter(). Bằng cách này, khi con trỏ chuột của chúng ta đi vào phần tử phần thứ hai, onMouseEnterphương thức được gọi và mouseenterđược ghi lại.

Chúng ta có thể sử dụng cùng một logic để chạy mã khi con chuột của chúng ta nhập một mục danh sách.

Ví dụ, chúng tôi viết:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

để thêm namesmảng chuỗi vào AppComponent. Sau đó, chúng tôi thêm các onMouseEnteronMouseOutphương thức ghi lại namegiá trị.

Tiếp theo, chúng tôi viết:

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

để hiển thị một ulphần tử với licác phần tử bên trong nó.

Chúng tôi kết xuất các mục trong namesmảng với *ngForchỉ thị. Và chúng tôi đặt (mouseenter)trên mỗi liphần tử được hiển thị để onMouseEnter(name)gọi onMouseEnterkhi namecon trỏ chuột của chúng tôi vào liphần tử.

Tương tự như vậy, chúng tôi thiết lập (mouseleave)để onMouseOut(name)gọi onMouseOutvới nameđể gọi onMouseOutvới namekhi con trỏ chuột của chúng tôi rời khỏi liphần tử.

Do đó, khi con trỏ chuột của chúng ta di chuyển qua “bob”, chúng ta sẽ thấy được mouse enter bobghi nhật ký.

Và khi con trỏ chuột của chúng ta rời khỏi “bob”, chúng ta sẽ thấy mouse out bobđược ghi nhật ký.

Áp dụng các kiểu hiệu ứng di chuột với Angular

Chúng ta có thể áp dụng các kiểu khi chúng ta di chuyển con trỏ chuột qua một phần tử hoặc khi nó rời khỏi phần tử.

Ví dụ, chúng tôi viết:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

để thay đổi onMouseEnteronMouseOutcác phương thức để nhận một tham số kiểu HTMLElement.

Trong đó, chúng tôi đặt thuộc tính colorCSS của hoverNamephần tử HTML thành một màu cụ thể.

Tiếp theo, chúng tôi viết:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

để thêm #hoverNamebiến tham chiếu mẫu vào từng liphần tử trong mẫu.

Các biến tham chiếu mẫu được gán cho các phần tử để chúng ta có thể tham chiếu chúng ở nơi khác trong khuôn mẫu thành phần hoặc trong mã lớp thành phần.

Angular có thể phân biệt phần tử đang được tham chiếu ngay cả khi chúng ta gán cùng một tên biến cho mỗi phần tử.

Sau đó, chúng tôi thiết lập (mouseenter)để onMouseEnter(hoverName)gọi onMouseEntervới hoverNamekhi chúng tôi di chuyển con trỏ chuột qua một liphần tử. Tương tự như vậy, chúng tôi đặt (mouseleave)để onMouseOut(hoverName)gọi onMouseOutvới hoverNamebiến tham chiếu mẫu khi con trỏ chuột của chúng tôi rời khỏi liphần tử.

Trong onMouseEnterđó, chúng tôi đặt hoverName.style.colorđể greenlàm cho văn bản có màu xanh lục khi chúng tôi di chuyển con trỏ chuột qua liphần tử có biến mẫu. Và trong onMouseOutđó, chúng tôi đặt hoverName.style.colorđể blacklàm cho văn bản có màu đen khi chúng tôi di chuyển con trỏ chuột qua phần tử li với biến mẫu.

Do đó, chúng ta sẽ thấy tên mà chúng ta di chuột qua trên trang chuyển sang màu xanh lục. Và khi con chuột của chúng ta rời khỏi tên, sau đó tên sẽ trở lại màu đen.

Sự thay đổi màu sắc của sự kiện trỏ chuột hiển thị các tên thay đổi thành màu xanh lục khi được di chuột

Chúng ta có thể viết lại mã trong ví dụ trước mà không cần sử dụng các biến mẫu.

Chúng tôi giữ nguyên mã app.component.ts. Sau đó, chúng tôi thay đổi mã app.component.htmlthành:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

Chúng tôi đã xóa #hoverNamebiến mẫu.

Thay vào đó, chúng tôi chuyển phần tử làm đối số của onMouseEnteronMouseOutcác phương thức bằng cách sử dụng $event.targetthay thế.

$event.targetlà yếu tố đã kích hoạt sự kiện. Và $eventlà đối tượng sự kiện của sự kiện đã được kích hoạt. Đối tượng sự kiện là một đối tượng sự kiện trình duyệt gốc.

Như chúng ta có thể thấy, logic của các sự kiện mouseenter và mouseleave của trình xử lý cũng giống như ví dụ JavaScript đơn giản. Sự khác biệt duy nhất là Angular cung cấp cho chúng ta cú pháp đặc biệt mà chúng ta có thể thêm vào mã HTML của mình để làm điều tương tự addEventListener.

Và các phương thức xử lý sự kiện của chúng tôi nằm trong mã lớp thành phần thay vì đặt nó ở bất kỳ đâu mà chúng tôi cảm thấy giống như trong mã JavaScript thuần túy.

Sự kết luận

Một điều chúng tôi phải làm thường xuyên khi chúng tôi tạo các ứng dụng giao diện người dùng web là xử lý các sự kiện chuột. Chúng ta có thể dễ dàng xử lý các sự kiện mouseenter và mouseleave với Angular.

Logic cũng giống như khi chúng ta sử dụng JavaScript thuần túy để xử lý các sự kiện đó. Angular chỉ cung cấp cho chúng ta một cách có cấu trúc để xử lý các sự kiện chuột và thiết bị đầu vào với các biến mẫu và chỉ thị.

Sự kiện mouseenter được kích hoạt khi chúng ta di chuyển con trỏ chuột qua một phần tử. Và sự kiện mouseleave được kích hoạt khi chúng ta di chuyển con trỏ chuột ra khỏi một phần tử.

Liên kết: https://www.telerik.com/blogs/angular-basics-how-to-use-angular-mouseenter-event

#angular #angularjs

Cách Sử Dụng Sự Kiện Mouseenter Trong Angular
山田  千代

山田 千代

1661913993

如何在 Angular 中使用 Mouseenter 事件

mouseenter 事件允許我們在用戶將鼠標懸停在元素上時觸發行為。了解有關此事件和其他鼠標事件的更多信息。

Angular 是一個允許我們為用戶創建交互式 Web 前端的框架。它為我們提供了以簡潔的方式處理用戶與瀏覽器上的輸入設備交互的方法。

當我們創建 Web 前端應用程序時,我們必須做的一件常見事情是處理鼠標事件。在本文中,我們將了解如何在 Angular 應用程序中處理鼠標交互事件。

本機瀏覽器鼠標輸入事件

當我們將鼠標懸停在元素上時會觸發 mouseenter 事件。此行為與 mouseover 事件相同。

然而,當指針從一個後代移動到它自己的空間時,鼠標懸停事件會冒泡到所有祖先元素,並且還會將事件發送給任何後代。mouseenter 事件會冒泡,但不會將事件發送給後代元素。

addEventListener在純 JavaScript 中,我們可以通過調用觸發事件的元素上的方法來監聽本機 mouseenter事件。

例如,我們寫:

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

在我們的 HTML 代碼中添加一些元素。

然後我們寫:

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

我們用 選擇我們想要監聽 mouseenter 的元素document.querySelector

然後我們調用mouseTarget.addEventListenerwithmouseenter和 mouseenter 事件處理函數來監聽 mouseenter 事件mouseTarget

同樣,我們對 mouseleave 事件做同樣的事情。當鼠標指針離開元素時觸發 mouseleave 事件。

在 mouseenter 事件處理函數中,我們將mouseTarget' 顏色設置為green。當我們的鼠標離開元素時,我們將mouseTarget' 顏色設置為black

結果,當我們將鼠標指針移動到“bar”時,我們看到它變成了綠色。當我們將鼠標指針從“條”上移開時,它會變回黑色。

在 Angular 組件中處理 Mouseenter 事件

Angular 自帶了處理 mouseenter 事件的內置語法。當我們的鼠標進入元素時,會在元素上觸發 mouseenter 事件。

Angular 的模板語法有(mouseenter)指令讓我們在元素上觸發 mouseenter 事件時運行代碼。例如,我們寫:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

將該onMouseEnter方法添加到AppComponent記錄消息的組件類中。

然後我們寫:

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

將一些元素添加到模板中。

在第二個部分元素中,我們將(mouseenter)指令添加到onMouseEnter(). 這樣,當我們的鼠標指針進入第二個部分元素時,該onMouseEnter方法被調用並被mouseenter記錄下來。

當鼠標進入列表項時,我們可以使用相同的邏輯來運行代碼。

例如,我們寫:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

names字符串數組添加到AppComponent. 然後我們添加記錄值的onMouseEnteronMouseOut方法。name

接下來,我們寫:

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

渲染其中包含ul元素的li元素。

我們使用指令渲染names數組中的條目。當我們的鼠標指針進入元素時*ngFor,我們設置(mouseenter)每個li渲染的元素來onMouseEnter(name)調用。onMouseEnternameli

同樣,當鼠標指針離開元素時,我們設置(mouseleave)onMouseOut(name)調用onMouseOutwithname來調用onMouseOutwith 。nameli

因此,當我們的鼠標指針移到“bob”上時,我們會看到mouse enter bob記錄。

當我們的鼠標指針離開“bob”時,我們會看到mouse out bob記錄。

使用 Angular 應用懸停效果樣式

當我們將鼠標指針移到元素上或離開元素時,我們可以應用樣式。

例如,我們寫:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

更改onMouseEnteronMouseOut方法以獲取類型的參數HTMLElement

在其中,我們將 HTML 元素的colorCSS 屬性設置hoverName為特定顏色。

接下來,我們寫:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

#hoverName模板引用變量添加到模板中li的每個元素。

模板引用變量被分配給元素,以便我們可以在組件模板的其他地方或組件類代碼中引用它們。

即使我們為每個元素分配相同的變量名,Angular 也可以區分被引用的元素。

然後,當我們將鼠標指針移到元素上時,我們設置(mouseenter)onMouseEnter(hoverName)調用onMouseEnterwith 。同樣,我們設置為在鼠標指針離開元素時使用模板引用變量進行調用。hoverNameli(mouseleave)onMouseOut(hoverName)onMouseOuthoverNameli

在中,當我們將鼠標指針移到帶有模板變量的元素上時onMouseEnter,我們設置hoverName.style.color為使文本變為綠色。在 中,當我們將鼠標指針移到帶有模板變量的 li 元素上時,我們設置為使文本變黑。greenlionMouseOuthoverName.style.colorblack

結果,我們應該看到我們懸停在頁面上的名稱變為綠色。當我們的鼠標離開名字時,名字會變回黑色。

Mouseenter 事件顏色更改顯示懸停時名稱更改為綠色

我們可以在不使用模板變量的情況下重寫前面示例中的代碼。

我們保持代碼app.component.ts不變。然後我們將代碼更改app.component.html為:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

我們刪除了#hoverName模板變量。

相反,我們通過 using 將元素作為參數傳遞onMouseEnteronMouseOut方法$event.target

$event.target是觸發事件的元素。並且$event是已經觸發的事件的事件對象。事件對像是本機瀏覽器事件對象。

正如我們所見,處理程序 mouseenter 和 mouseleave 事件的邏輯與純 JavaScript 示例相同。唯一的區別是 Angular 為我們提供了特殊的語法,我們可以將其添加到 HTML 代碼中以執行與addEventListener.

而且我們的事件處理程序方法位於組件類代碼中,而不是放在我們覺得在純 JavaScript 代碼中的任何地方。

結論

當我們創建 Web 前端應用程序時,我們經常要做的一件事是處理鼠標事件。我們可以使用 Angular 輕鬆處理 mouseenter 和 mouseleave 事件。

邏輯與我們使用純 JavaScript 處理這些事件時的邏輯相同。Angular 只是為我們提供了一種結構化的方式來處理帶有模板變量和指令的鼠標和輸入設備事件。

當我們將鼠標指針移到一個元素上時,會觸發 mouseenter 事件。當我們將鼠標指針從元素上移開時,會觸發 mouseleave 事件。

鏈接:https ://www.telerik.com/blogs/angular-basics-how-to-use-angular-mouseenter-event

#angular #angularjs

如何在 Angular 中使用 Mouseenter 事件
Thierry  Perret

Thierry Perret

1661542680

Comment intégrer Un Calendrier Complet Avec Une Application Angular

Introduction

Salut les lecteurs ! Dans ce blog, nous allons passer en revue le package FullCalendar et comprendre comment nous pouvons l'intégrer à une application angulaire. Nous verrons également comment nous pouvons y créer des événements et les supprimer.

À propos de FullCalendar

FullCalendar est le calendrier Javascript le plus célèbre. Ce package peut être intégré à Angular, React, Vue ou toute autre application javascript. C'est un ensemble très léger et robuste. Il nous fournit une large gamme de plugins comme la grille de jour qui offre des vues de grille de mois et de jour, la grille de défilement pour les fonctionnalités de défilement avancées, etc. L'autre liste de plugins est disponible ici . Vous pouvez parcourir toute la liste.

Voyons maintenant comment nous pouvons commencer avec cela.

Intégration de FullCalendar

Commençons par créer une nouvelle application angulaire à l'aide de la commande suivante :

ng new calendarIntegration

Maintenant, lorsque nous avons créé notre application, nous devons installer le module de calendrier complet

Utilisez la commande suivante pour l'installer. Nous allons également installer deux autres packages. Le premier est le plug-in daygrid pour les vues par jour et par mois et le second est le plug-in d'interaction qui concerne les événements de glisser-déposer, les événements de clic de date et certaines autres actions sélectionnables.

npm i @fullcalendar/angular
npm i @fullcalendar/daygrid
npm i @fullcalendar/interaction

Lorsque les packages sont installés, nous devons mettre à jour notre fichier app.module.ts en ajoutant le module au tableau des importations.

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

En dehors de cela, nous devons également enregistrer les plugins. Donc juste avant votre @NgModule, ajoutez ces lignes pour enregistrer les plugins.

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

Le CSS par défaut pour le calendrier complet sera chargé lorsque vous importerez le composant de calendrier complet.

La vue fullCalendar peut être générée par une seule ligne dans votre HTML qui prend les options en entrée. Nous utilisons la balise full-calendar pour cela.

<full-calendar [options]="calendarOptions"></full-calendar>

Dans Angular généralement, on passe l'entrée entre les [crochets] et les sorties avec (crochets) Mais dans le cas d'un calendrier complet tout est passé avec les options sous forme de paires clé-valeur.

Vous pouvez modifier les propriétés passées dans les options en leur attribuant de nouvelles valeurs.

Dans la classe TypeScript, nous initialisons les options de calendrier qui sont passées dans le HTML.

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.onDateClick.bind(this),
    events: [],
    eventClick: this.handleEventClick.bind(this),
  };

Ce sont les options de calendrier dans lesquelles nous passons tout. Ici, nous pouvons voir des propriétés comme initialView, weekends, dateClick et eventClick. La valeur par défaut pour les week-ends est false. À chaque date, cliquez sur le calendrier, la fonction onDateClick est déclenchée. Et pour chaque événement, cliquez sur la fonction handleEventClick est appelée. Ainsi, pour chaque événement, nous ajoutons les fonctionnalités requises dans les fonctions respectives.

Ajout et suppression d'événements

Pour ajouter des événements au calendrier, nous devons pousser les événements dans le tableau des événements de calendarOptions. Nous pouvons créer un modal à chaque clic de date et prendre le nom de l'événement comme entrée de l'utilisateur, puis nous pouvons simplement ajouter cet événement particulier au tableau des événements. Ici, je vais montrer la partie fonctionnalité alors que pour l'ensemble du code d'ajout et de suppression d'événements avec la partie HTML, vous pouvez le trouver ici . Voici sa fonction pour elle

onDateClick(date: { dateStr: string; }) {
    this.modalRef = this.modalService.show(this.viewModal);
    this.date = date.dateStr;
  }
  
createEvent() {
    let newEvent = {
      title: this.eventName,
      date: this.date
    };
    this.newEvents.push(newEvent);
    this.calendarOptions.events = [...this.newEvents];
    this.eventName = "";
  }

De même, pour supprimer un événement, nous utiliserons la fonction handleEventClick pour obtenir le titre de l'événement à supprimer, puis supprimerons cette entrée particulière du tableau des événements.

handleEventClick(arg){
    this.deleteEventTitle = arg.event._def.title;
  }

  deleteEvent(arg){
    for (var i = 0; i < this.newEvents.length; i++) {
      if (this.newEvents[i].title == this.deleteEventTitle) {
        this.newEvents.splice(i, 1);
        this.calendarOptions.events=[];
        break;
      }
    }
    this.calendarOptions.events = [...this.newEvents];
  }

Dans la fonction handleEventClick, nous obtenons l'argument en tant que paramètre, qui contient tous les détails de l'événement sur lequel on clique. Nous obtenons donc le titre à partir de là. Et dans la fonction onDateClick, nous obtenons la date sur laquelle l'utilisateur a cliqué.

Conclusion

Nous avons maintenant passé en revue les concepts de base requis pour l'intégration du package fullCalendar dans Angular et également comment nous pouvons y ajouter et supprimer des événements. Alors allez ici et explorez plus sur ce package. De plus, si vous rencontrez des problèmes avec le code, vous pouvez visiter ici et télécharger le modèle correspondant.

Lien : https://blog.knoldus.com/full-calendar-integration-in-angular/

#angular #angularjs

Comment intégrer Un Calendrier Complet Avec Une Application Angular
Hans  Marvin

Hans Marvin

1661531820

How to Integrate Full Calendar with Angular Application

Hey readers! In this blog, we will going through the FullCalendar package and understand how we can integrate it with an angular application. We will also see how we can create events in it and delete them.

FullCalendar is the most famous Javascript calendar. This package can be integrated with Angular, react, Vue, or any javascript application. It is a very lightweight and robust package. It provides us a wide range of plugins like day grid which offers month and day grid views, scrollgrid for advanced scrolling features, etc. The other list of plugins is available here. You can go through the whole list.

Let us now see how we can get started with it.

See more at: https://blog.knoldus.com/full-calendar-integration-in-angular/

#angular #angularjs

How to Integrate Full Calendar with Angular Application
加藤  七夏

加藤 七夏

1661520960

如何將完整日曆與 Angular 應用程序集成

介紹

嘿讀者!在這篇博客中,我們將瀏覽 FullCalendar 包並了解如何將它與 Angular 應用程序集成。我們還將了解如何在其中創建事件並刪除它們。

關於 FullCalendar

FullCalendar 是最著名的 Javascript 日曆。這個包可以與 Angular、react、Vue 或任何 javascript 應用程序集成。它是一個非常輕巧且堅固的軟件包。它為我們提供了廣泛的插件,例如提供月和日網格視圖的日網格、用於高級滾動功能的滾動網格等。其他插件列表可在此處獲得。您可以瀏覽整個列表。

現在讓我們看看如何開始使用它。

集成 FullCalendar

首先,讓我們使用以下命令創建一個新的 Angular 應用程序:

ng new calendarIntegration

現在,當我們創建應用程序時,我們需要安裝完整的日曆模塊

使用以下命令安裝它。我們還將安裝另外兩個軟件包。第一個是用於日和月視圖的 daygrid 插件,第二個是用於拖放事件、日期單擊事件和其他一些可選操作的交互插件。

npm i @fullcalendar/angular
npm i @fullcalendar/daygrid
npm i @fullcalendar/interaction

安裝包後,我們需要通過將模塊添加到導入數組來更新我們的 app.module.ts 文件。

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

除此之外,我們還需要註冊插件。所以在你的@NgModule 之前,添加這些行來註冊插件。

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

導入完整日曆組件時,將加載完整日曆的默認 CSS。

fullCalendar 視圖可以由 HTML 中的一行生成,該行將選項作為輸入。我們使用完整的日曆標籤。

<full-calendar [options]="calendarOptions"></full-calendar>

通常,在 Angular 中,我們在 [brackets] 中傳遞輸入,在 (brackets) 中傳遞輸出,但在完整日曆的情況下,所有內容都通過選項作為鍵值對傳遞。

您可以通過為其分配新值來修改選項中傳遞的屬性。

在 typescript 類中,我們初始化了在 HTML 中傳遞的日曆選項。

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.onDateClick.bind(this),
    events: [],
    eventClick: this.handleEventClick.bind(this),
  };

這些是我們傳遞所有內容的日曆選項。在這裡,我們可以看到 initialView、週末、dateClick 和 eventClick 等屬性。週末的默認值為 false。在每個日期點擊日曆上的 onDateClick 功能都會被觸發。並且對於每個事件單擊,都會調用 handleEventClick 函數。因此,對於每個事件,我們在各自的功能中添加所需的功能。

添加和刪除事件

要將事件添加到日曆中,我們需要將事件推送到 calendarOptions 的 events 數組中。我們可以在每次點擊日期時創建一個模式,並將事件名稱作為用戶的輸入,然後我們可以簡單地將特定事件添加到事件數組中。在這裡,我將展示功能部分,而對於使用 HTML 部分添加和刪除事件的整個代碼,您可以在此處找到它。這是它的功能

onDateClick(date: { dateStr: string; }) {
    this.modalRef = this.modalService.show(this.viewModal);
    this.date = date.dateStr;
  }
  
createEvent() {
    let newEvent = {
      title: this.eventName,
      date: this.date
    };
    this.newEvents.push(newEvent);
    this.calendarOptions.events = [...this.newEvents];
    this.eventName = "";
  }

同樣,要刪除一個事件,我們將使用 handleEventClick 函數來獲取要刪除的事件的標題,然後從事件數組中刪除該特定條目。

handleEventClick(arg){
    this.deleteEventTitle = arg.event._def.title;
  }

  deleteEvent(arg){
    for (var i = 0; i < this.newEvents.length; i++) {
      if (this.newEvents[i].title == this.deleteEventTitle) {
        this.newEvents.splice(i, 1);
        this.calendarOptions.events=[];
        break;
      }
    }
    this.calendarOptions.events = [...this.newEvents];
  }

在 handleEventClick 函數中,我們將參數作為參數獲取,其中包含被單擊事件的所有詳細信息。所以我們從那裡得到標題。在 onDateClick 函數中,我們獲取用戶點擊的日期。

結論

現在我們已經了解了在 Angular 中集成 fullCalendar 包所需的基本概念,以及我們如何在其中添加和刪除事件。所以去這裡探索更多關於這個包的信息。此外,如果您對代碼有任何問題,您可以訪問此處並下載相應的模板。

鏈接:https ://blog.knoldus.com/full-calendar-integration-in-angular/

#angular #angularjs

如何將完整日曆與 Angular 應用程序集成

Как интегрировать полный календарь с приложением Angular

Введение

Эй, читатели! В этом блоге мы рассмотрим пакет FullCalendar и поймем, как мы можем интегрировать его с приложением angular. Мы также увидим, как мы можем создавать в нем события и удалять их.

О FullCalendar

FullCalendar — самый известный календарь Javascript. Этот пакет можно интегрировать с Angular, React, Vue или любым приложением javascript. Это очень легкая и прочная упаковка. Он предоставляет нам широкий спектр плагинов, таких как дневная сетка, которая предлагает просмотр сетки месяца и дня, сетка прокрутки для расширенных функций прокрутки и т. Д. Другой список плагинов доступен здесь . Вы можете пройтись по всему списку.

Давайте теперь посмотрим, как мы можем начать с этим.

Интеграция FullCalendar

Во-первых, давайте создадим новое приложение angular, используя следующую команду:

ng new calendarIntegration

Теперь, когда мы создали наше приложение, нам нужно установить модуль полного календаря.

Используйте следующую команду для его установки. Мы также будем устанавливать два других пакета. Первый — это плагин дневной сетки для просмотра дней и месяцев, а второй — плагин взаимодействия, который предназначен для событий перетаскивания, событий щелчка даты и некоторых других выбираемых действий.

npm i @fullcalendar/angular
npm i @fullcalendar/daygrid
npm i @fullcalendar/interaction

Когда пакеты установлены, нам нужно обновить наш файл app.module.ts, добавив модуль в массив импорта.

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

Помимо этого, нам также необходимо зарегистрировать плагины. Итак, прямо перед вашим @NgModule добавьте эти строки для регистрации плагинов.

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

CSS по умолчанию для полного календаря будет загружен при импорте компонента полного календаря.

Представление fullCalendar может быть сгенерировано одной строкой в ​​вашем HTML, которая принимает параметры в качестве входных данных. Для этого мы используем тег full-calendar.

<full-calendar [options]="calendarOptions"></full-calendar>

Обычно в Angular мы передаем входные данные в [скобки], а выходные данные — в (скобки). Но в случае полного календаря все передается с параметрами в виде пар ключ-значение.

Вы можете изменить свойства, переданные в параметрах, назначив им новые значения.

В классе typescript мы инициализируем параметры календаря, которые передаются в HTML.

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.onDateClick.bind(this),
    events: [],
    eventClick: this.handleEventClick.bind(this),
  };

Это варианты календаря, в которые мы все пропускаем. Здесь мы видим такие свойства, как InitialView, Weekends, DateClick и EventClick. Значение по умолчанию для выходных — false. При каждом щелчке даты в календаре запускается функция onDateClick. И для каждого клика по событию вызывается функция handleEventClick. Таким образом, для каждого события мы добавляем необходимые функции в соответствующих функциях.

Добавление и удаление событий

Чтобы добавить события в календарь, нам нужно поместить события в массив событий calendarOptions. Мы можем создать модальное окно для каждого клика по дате и взять имя события в качестве входных данных от пользователя, а затем мы можем просто добавить это конкретное событие в массив событий. Здесь я покажу функциональную часть, тогда как весь код для добавления и удаления событий с HTML-частью вы можете найти здесь . Вот его функция для него

onDateClick(date: { dateStr: string; }) {
    this.modalRef = this.modalService.show(this.viewModal);
    this.date = date.dateStr;
  }
  
createEvent() {
    let newEvent = {
      title: this.eventName,
      date: this.date
    };
    this.newEvents.push(newEvent);
    this.calendarOptions.events = [...this.newEvents];
    this.eventName = "";
  }

Точно так же, чтобы удалить событие, мы будем использовать функцию handleEventClick, чтобы получить заголовок удаляемого события, а затем удалить эту конкретную запись из массива событий.

handleEventClick(arg){
    this.deleteEventTitle = arg.event._def.title;
  }

  deleteEvent(arg){
    for (var i = 0; i < this.newEvents.length; i++) {
      if (this.newEvents[i].title == this.deleteEventTitle) {
        this.newEvents.splice(i, 1);
        this.calendarOptions.events=[];
        break;
      }
    }
    this.calendarOptions.events = [...this.newEvents];
  }

В функции handleEventClick мы получаем аргумент в качестве параметра, который содержит все детали события, по которому был сделан щелчок. Таким образом, мы получаем название оттуда. А в функции onDateClick мы получаем дату, на которую нажал пользователь.

Вывод

Теперь мы рассмотрели основные концепции, необходимые для интеграции пакета fullCalendar в Angular, а также то, как мы можем проверять и удалять события в нем. Так что перейдите сюда и узнайте больше об этом пакете. Кроме того, если у вас есть какие-либо проблемы с кодом, вы можете посетить здесь и загрузить соответствующий шаблон для него.

Ссылка: https://blog.knoldus.com/full-calendar-integration-in-angular/

#angular #angularjs

Как интегрировать полный календарь с приложением Angular
Hong  Nhung

Hong Nhung

1661499196

Cách Tích Hợp Lịch đầy đủ Với Ứng Dụng Angular

Giới thiệu

Xin chào các độc giả! Trong blog này, chúng ta sẽ xem qua gói FullCalendar và hiểu cách chúng ta có thể tích hợp nó với một ứng dụng góc cạnh. Chúng tôi cũng sẽ xem cách chúng tôi có thể tạo các sự kiện trong đó và xóa chúng.

Giới thiệu về FullCalendar

FullCalendar là lịch Javascript nổi tiếng nhất. Gói này có thể được tích hợp với Angular, react, Vue hoặc bất kỳ ứng dụng javascript nào. Nó là một gói rất nhẹ và mạnh mẽ. Nó cung cấp cho chúng tôi một loạt các plugin như lưới ngày cung cấp chế độ xem lưới tháng và ngày, lưới cuộn cho các tính năng cuộn nâng cao, v.v. Danh sách các plugin khác có sẵn tại đây . Bạn có thể xem qua toàn bộ danh sách.

Bây giờ chúng ta hãy xem cách chúng ta có thể bắt đầu với nó.

Tích hợp FullCalendar

Đầu tiên, hãy tạo một ứng dụng góc cạnh mới bằng lệnh sau:

ng new calendarIntegration

Bây giờ khi chúng tôi đã tạo ứng dụng của mình, chúng tôi cần cài đặt mô-đun lịch đầy đủ

Sử dụng lệnh sau để cài đặt nó. Chúng tôi cũng sẽ cài đặt hai gói khác. Đầu tiên là plugin daygrid cho các chế độ xem ngày và tháng và thứ hai là plugin tương tác dành cho các sự kiện kéo và thả, sự kiện nhấp chuột vào ngày và một số hành động có thể chọn khác.

npm i @fullcalendar/angular
npm i @fullcalendar/daygrid
npm i @fullcalendar/interaction

Khi các gói được cài đặt, chúng ta cần cập nhật tệp app.module.ts bằng cách thêm mô-đun vào mảng nhập.

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

Ngoài ra, chúng ta cũng cần đăng ký các plugin. Vì vậy, ngay trước @NgModule của bạn, hãy thêm những dòng này để đăng ký plugin.

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

CSS mặc định cho lịch đầy đủ sẽ được tải khi bạn nhập thành phần lịch đầy đủ.

Chế độ xem fullCalendar có thể được tạo bằng một dòng trong HTML của bạn, dòng này lấy các tùy chọn làm đầu vào. Chúng tôi sử dụng thẻ lịch đầy đủ cho nó.

<full-calendar [options]="calendarOptions"></full-calendar>

Trong Angular nói chung, chúng tôi chuyển đầu vào trong [ngoặc] và đầu ra bằng (ngoặc) Nhưng trong trường hợp lịch đầy đủ, mọi thứ được chuyển với các tùy chọn dưới dạng cặp khóa-giá trị.

Bạn có thể sửa đổi các thuộc tính được truyền trong các tùy chọn bằng cách gán cho chúng các giá trị mới.

Trong lớp typecript, chúng tôi khởi tạo các tùy chọn lịch được chuyển trong HTML.

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.onDateClick.bind(this),
    events: [],
    eventClick: this.handleEventClick.bind(this),
  };

Đây là các tùy chọn lịch mà chúng tôi vượt qua mọi thứ. Ở đây chúng ta có thể thấy các thuộc tính như InitialView, cuối tuần, dateClick và eventClick. Giá trị mặc định cho các ngày cuối tuần là false. Vào mỗi ngày bấm vào lịch onDateClick chức năng được kích hoạt. Và đối với mỗi sự kiện nhấp chuột, hàm handleEventClick được gọi. Vì vậy, đối với mỗi sự kiện, chúng tôi thêm chức năng cần thiết trong các chức năng tương ứng.

Thêm và xóa sự kiện

Để thêm sự kiện vào lịch, chúng ta cần đẩy các sự kiện vào mảng sự kiện của calendarOptions. Chúng tôi có thể tạo một phương thức cho mỗi lần nhấp vào ngày và lấy tên sự kiện làm đầu vào từ người dùng và sau đó chúng tôi có thể chỉ cần thêm sự kiện cụ thể đó vào mảng sự kiện. Ở đây tôi sẽ hiển thị phần chức năng trong khi toàn bộ mã để thêm và xóa các sự kiện với phần HTML, bạn có thể tìm thấy nó ở đây . Đây là chức năng của nó cho nó

onDateClick(date: { dateStr: string; }) {
    this.modalRef = this.modalService.show(this.viewModal);
    this.date = date.dateStr;
  }
  
createEvent() {
    let newEvent = {
      title: this.eventName,
      date: this.date
    };
    this.newEvents.push(newEvent);
    this.calendarOptions.events = [...this.newEvents];
    this.eventName = "";
  }

Tương tự, để xóa một sự kiện, chúng ta sẽ sử dụng hàm handleEventClick để lấy tiêu đề của sự kiện đó và sau đó xóa mục cụ thể đó khỏi mảng sự kiện.

handleEventClick(arg){
    this.deleteEventTitle = arg.event._def.title;
  }

  deleteEvent(arg){
    for (var i = 0; i < this.newEvents.length; i++) {
      if (this.newEvents[i].title == this.deleteEventTitle) {
        this.newEvents.splice(i, 1);
        this.calendarOptions.events=[];
        break;
      }
    }
    this.calendarOptions.events = [...this.newEvents];
  }

Trong hàm handleEventClick, chúng ta nhận được đối số là một tham số, chứa tất cả các chi tiết của sự kiện được nhấp. Vì vậy, chúng tôi có được tiêu đề từ đó. Và trong chức năng onDateClick, chúng tôi nhận được ngày được người dùng nhấp vào.

Sự kết luận

Bây giờ chúng ta đã xem qua các khái niệm cơ bản cần thiết để tích hợp gói fullCalendar trong Angular và cũng như cách chúng ta có thể kiểm tra và xóa các sự kiện trong đó. Vì vậy, hãy truy cập vào đây và khám phá thêm về gói này. Ngoài ra, nếu bạn có bất kỳ vấn đề nào với mã, bạn có thể truy cập vào đây và tải xuống mẫu tương ứng cho mã đó.

Liên kết: https://blog.knoldus.com/full-calendar-integration-in-angular/

#angular #angularjs

Cách Tích Hợp Lịch đầy đủ Với Ứng Dụng Angular
Thierry  Perret

Thierry Perret

1660676160

10 Meilleures Bibliothèques De Composants angulaires Pour 2022

Angular est l'un des frameworks les plus importants vous permettant de créer des applications Web frontales beaucoup plus rapidement et plus efficacement. Développé par Google et basé sur TypeScript, un langage de programmation populaire développé et maintenu par Microsoft, Angular est le premier choix de nombreux développeurs professionnels pour la création d'applications Web. En très peu de temps, ce cadre d'application Web open source a conquis le cœur de nombreux développeurs Web et clients à travers le monde. En fait, selon BuiltWith , plus de 300 000 sites Web sont construits sur le framework Angular. La vaste gamme de bibliothèques de composants réutilisables et accessibles qui peuvent aider à accélérer le processus de développement Web fait d'Angular un choix privilégié.

Examinons quelques bibliothèques de composants angulaires populaires qui peuvent vous aider à créer des applications et des systèmes Web robustes.

Matériau angulaire

Angular Material est une bibliothèque de composants officielle d'Angular qui fonctionne sur le Material Design de Google . Créée à l'aide d'Angular et de TypeScript, cette bibliothèque comprend un ensemble de composants pouvant être utilisés pour créer des boutons, des boîtes de dialogue, des feuilles inférieures, etc. Il est livré avec environ 40 composants qui peuvent être utilisés pour créer des thèmes entièrement personnalisables et créer des applications riches en fonctionnalités.

Caractéristiques du matériau angulaire :

  • Convivial
  • Applications réactives
  • Composants d'interface utilisateur intuitifs
  • Compatibilité multiplateforme

Composants matériels angulaires :

  • Contrôles de formulaire, tels que la saisie semi-automatique, la case à cocher, le bouton radio, la saisie, etc.
  • Boutons, icônes, barre de progression
  • Format du tableau de données
  • Barre de navigation, navigation latérale et menu de barre d'outils
  • Différents types de pop-up

Vous voulez vérifier d'autres composants de matériaux angulaires et leur utilisation? Vous pouvez aller sur https://material.angular.io/components/categories

Processus d'installation

https://material.angular.io/guide/getting-started

Ce qui est bien avec le matériau angulaire

  • Facile à utiliser
  • Livré avec une excellente documentation
  • Simple pour maintenir une conception cohérente

Ce qui est mauvais avec le matériau angulaire

  • Certains composants ne sont pas assez réactifs
  • Surutilisation ou mauvaise utilisation d' ARIA dans certains composants
  • Il n'est pas facilement personnalisable d'ajouter l'accessibilité aux composants
  • Absence d'un composant qui importe tous les composants

Exemple

Avec l'aide de différents types de composants de table -

première

PAR Bootstrap

NG-Bootstrap est la bibliothèque d'interface utilisateur la plus populaire entièrement construite à l'aide de TypeScript. Cette bibliothèque de composants est largement utilisée pour créer des widgets spécifiques à Angular de haut en bas. Ces widgets sont faciles à utiliser et ne nécessitent aucune connaissance supplémentaire en plus de Bootstrap et Angular.

Contrairement à sa version précédente, NG-Bootstrap a abandonné sa dépendance à jQuery, faisant de Bootstrap 4 CSS sa seule autre dépendance. L'implémentation de la plupart des composants JavaScript constitue une solution idéale pour utiliser Angular avec Bootstrap.

Fonctionnalités

  • Donne un aspect professionnel à l'application
  • Facilement accessible pour l'intégration avec Angular 4 et supérieur
  • Ajoute de la réactivité à votre front-end
  • C'est léger

Composants d'amorçage OF

  • Boutons - Pour changer l'apparence des boutons
  • Alerte - Pour afficher les messages d'alerte avec une interface utilisateur différente
  • Carousel - Pour des effets de glissement avec différentes options d'interface utilisateur
  • DatePicker - L'utilisateur peut sélectionner une date avec différentes options d'interface utilisateur
  • Réduire - Option de réduction en un clic
  • Liste déroulante - Sélectionnez plus d'options dans les menus déroulants
  • Typehead - Sélection différente selon l'entrée de l'utilisateur
  • Modal - Pour obtenir une sensation de type pop-up après l'entrée de l'utilisateur

Vous voulez vérifier d'autres composants NG Bootstrap et leur utilisation ? Vous pouvez aller sur https://ng-bootstrap.github.io/#/components

Processus d'installation

https://ng-bootstrap.github.io/#/getting-started

Ce qui est bien avec NG Bootstrap

  • Grande communauté de développeurs
  • une large gamme de widgets à utiliser dans Angular
  • Créez des sites Web fantastiques qui fonctionnent de manière transparente sur mobile

Ce qui est mauvais avec Bootstrap

  • Nécessite une expérience de travail de Bootstrap pour démarrer avec NG-Bootstrap
  • Souvent, il devient difficile de localiser un problème dans le code
  • Pas de mises à jour fréquentes

Exemple

Avec l'aide du composant Form and Datepicker -

2

NGX-Bootstrap

NGX-Bootstrap est une autre bibliothèque de composants d'interface utilisateur angulaire populaire qui contient tous les composants de base de Bootstrap alimentés par Angular. Cela signifie que vous n'avez pas besoin d'inclure des composants JS, mais il utilise CSS et le balisage proposé par Bootstrap. Les composants modulaires de NGX-Bootstrap peuvent être ajustés et stylisés par des scripts et manipulés via des rôles ARIA (Accessible Rich Internet Applications).

Il s'agit d'un framework bien conçu qui étend les capacités des composants Bootstrap, permettant aux développeurs de les utiliser dans les applications Angular. Étant donné que les composants Bootstrap sont développés avec Angular, il offre d'excellentes performances sur tous les appareils. Les composants NGX Bootstrap sont plus extensibles, modulaires et adaptables que le Bootstrap natif.

Fonctionnalités

  • Documentation utile et facile à comprendre
  • Code sans tracas
  • Chaque composant est testé et supporte les dernières versions d'Angular

Composants NGX-Bootstrap

  • Pagination - Pour afficher les pages du site Web paginées
  • Accordéon - Pour afficher le texte caché après un clic
  • Popover - Différentes options de pop-up après l'entrée de l'utilisateur
  • Progressbar - Pour afficher l'achèvement
  • Réduire - Réduire le contenu en un clic
  • Carrousel - Pour ajouter un curseur comme l'interface utilisateur

Obtenez des informations plus détaillées et leur utilisation ici https://valor-software.com/ngx-bootstrap/#/components

Processus d'installation

https://www.npmjs.com/package/ngx-bootstrap/v/5.1.0

Ce qui est bien avec NGX Bootstrap

  • Il existe de nombreux composants accessibles dès la sortie de la boîte
  • Il aide à créer une interface utilisateur réactive
  • Peut fonctionner sur les plates-formes mobiles et de bureau avec le même niveau de performances

Qu'est-ce qui est mauvais NGX Bootstrap

  • Certains composants manquent de fonctionnalité d'accessibilité

Exemple

Avec l'aide du composant de pagination -

3

Interface utilisateur Onsen

Onsen UI est une excellente bibliothèque de composants angulaires principalement utilisée pour créer des applications Web et mobiles hybrides de haute qualité pour Android et iOS à l'aide de JavaScript. Cette bibliothèque de composants fournit des conceptions plates et matérielles qui peuvent être combinées avec le framework Angular.

Onsen UI fournit aux développeurs de puissants outils CLI et de développement pour créer des applications Web progressives (PWA) et des applications mobiles hautement réactives. Les directives Incredible Angular permettent un style automatique basé sur la plate-forme que vous choisissez pour le projet.

Fonctionnalités

  • L'interface utilisateur Onsen fonctionne bien avec Monaca , qui est une excellente plate-forme pour créer des applications hybrides
  • CSS, JavaScript et composants optimisés pour les mobiles
  • Fournir un support pour les matériaux et la conception à plat
  • Compatible avec AngularJS et Angular 2+

Composants de l'interface utilisateur Onsen

  • Barre d'onglets - Pour afficher l'onglet, sélectionnez les options avec différentes interfaces utilisateur
  • CheckBox - Pour obtenir l'entrée de l'utilisateur avec une case à cocher avec différentes interfaces utilisateur
  • Notification - Identique aux fonctionnalités de type alerte
  • Carte - Pour donner une impression de carte à l'interface utilisateur

Pour obtenir plus d'informations sur les composants, vous pouvez vous rendre sur https://onsen.io/v2/api/css.html .

Processus d'installation

https://onsen.io/v2/guide/installation.html

Ce qui est bien avec l'interface utilisateur Onsen

  • Construit sur du code open source
  • Facile à apprendre
  • Mise en page réactive
  • Compile le code JavaScript et HTML5 sans obliger les développeurs à l'écrire d'une manière spécifique

Ce qui est mauvais avec l'interface utilisateur Onsen

  • Débogueur gratuit non disponible
  • Petite communauté

Exemple

Avec l'aide de Gesture avec quelques autres composants -

4

PrimeNG

PrimeNG est une suite d'interface utilisateur complète pour Angular. Il offre une riche collection de plus de 80 composants d'interface utilisateur non seulement open source et gratuits, mais extrêmement faciles à mettre en œuvre. PrimeNG vous permet de choisir parmi une gamme de matériaux et de thèmes plats conçus par des professionnels, hautement réactifs et optimisés pour le toucher, et offrant des performances extraordinaires sur de nombreux appareils mobiles.

Le principal avantage de PrimeNG par rapport aux autres composants est que PrimeNG offre plusieurs options de personnalisation et permet aux développeurs de le rendre facilement accessible comme ils le souhaitent. Vous pouvez démarrer en un rien de temps avec des modèles d'application CLI Angular natifs hautement personnalisables.

Fonctionnalités

  • A plus de 80 composants parmi lesquels choisir
  • Tous les widgets sont disponibles gratuitement et open-source
  • Une gamme de thèmes pour l'aspect professionnel de l'application

Composants PrimeNG

  • Boutons et SplitButtons
  • Composant de téléchargement de fichiers
  • Graphiques - camembert, barre, ligne et beignet
  • Messages d'alerte avec Growl et Messages
  • Composants de données - DataTable, DataList et DataGrid
  • Composants de superposition - Boîte de dialogue, Lightbox et Panneau de superposition

Obtenez plus d'informations sur les différents composants de PrimeNg sous l'URL du processus d'installation.

Processus d'installation

https://primefaces.org/primeng/setup

Ce qui est bien avec PrimeNG

  • Bibliothèque unique pour tous les composants
  • Les composants PrimeNG prennent en charge les modèles
  • Une gamme de thèmes au choix
  • Mises à jour de maintenance fréquentes

Ce qui est mauvais avec PrimeNG

  • La documentation n'est pas cohérente
  • Il accepte les contributions open source uniquement pour les corrections de bogues, mais pas pour les fonctionnalités
  • Peu de composants abusent ou abusent des applications Internet riches accessibles

Exemple

Avec l'aide du composant Form editor -

5

PAR la foudre

NG-Lightning est une autre bibliothèque de composants angulaires de premier plan écrite en TypeScript et basée sur le système de conception Lightning d'Angular et de Salesforce . L'objectif principal de ce composant de bibliothèque est d'offrir des directives et des composants angulaires natifs au Lightning Design System.

NG-Lightning fonctionne sur des composants fonctionnels sans état qui s'appuient sur ses propriétés d'entrée pour offrir des performances, une flexibilité et une intégration transparente améliorées en fonction des exigences de votre application.

Fonctionnalités

  • Il possède un vaste ensemble de composants angulaires natifs
  • Il peut être utilisé pour créer une application angulaire avec une conception Lightning qui interagit avec les services Salesforce REST

DE Composants Lightning

  • Fil d'Ariane - Pour afficher les pages suivantes et précédentes
  • Spinners - Affichage des travaux en cours sous forme de rotation circulaire
  • Badges - Pour afficher différents types de badges avec différentes interfaces utilisateur
  • Icônes - Différentes icônes s'affichent dans différentes formes et tailles
  • Datatables - Similaire aux composants Table avec différentes options d'interface utilisateur
  • DatePickers - Pour la sélection de dates avec différentes interfaces utilisateur
  • Formulaires - Des éditeurs pour la saisie de l'utilisateur
  • Évaluations - Pour afficher différents types d'évaluations d'utilisateurs avec différentes interfaces utilisateur
  • Lookups - Recherche de recherche après l'entrée de l'utilisateur

et plus d'informations sur les différents composants PrimeNG ici https://ng-lightning.github.io/ng-lightning/#/components/

Processus d'installation

https://www.npmjs.com/package/ng-lightning

Ce qui est bien avec NG Lightning

  • Les développeurs peuvent transpiler le code TypeScript et télécharger le code JavaScript
  • Il permet de créer une page Web et de la faire apparaître dans une application Canvas

Ce qui est mauvais avec NG Lightning

Exemple

Avec l'aide des composants Notification, Pagination

6

Vaadin

Vaadin propose des composants de niveau entreprise qui sont parfaits pour créer des applications mobiles et de bureau. Avec des composants accessibles et thématiques, les développeurs peuvent créer des applications plus rapidement et plus efficacement. Vaadin est également livré avec Figma - une bibliothèque de haute qualité qui facilite la création de prototypes d'interfaces utilisateur basées sur Vaadin.

Vaadin est basé sur la norme ouverte de composants Web W3C, ce qui signifie qu'il fonctionne de manière transparente sur tous les derniers navigateurs et peut être utilisé avec n'importe quel framework frontal.

Fonctionnalités

  • Bibliothèque Figma , qui est une bibliothèque de haute qualité pour la création de prototypes
  • Un bon système de conception
  • Il offre plus de 45 composants
  • Il est entièrement orienté objet

Composants Vaadin

  • Cartes de 29 types différents
  • DataGrid avec tri, filtrage, drop & down, etc.
  • Un champ déroulant filtrable
  • Sélecteur de date pour sélectionner une date avec différentes interfaces utilisateur
  • Télécharger - Pour télécharger des fichiers
  • Carte - Pour ajouter une carte avec des options de zoom avant et arrière pour les utilisateurs
  • Connexion - Pour obtenir les identifiants de connexion de l'utilisateur avec différentes options d'interface utilisateur

Plus d'informations sur les composants Vaadin ici https://vaadin.com/docs/latest/components

Processus d'installation

https://vaadin.com/docs/latest/guide/quick-start

Ce qui est bien avec Vaadin

  • Accélérer le processus de développement
  • Adapté aux mobiles
  • Facile à apprendre et à naviguer
  • Documentation complète
  • Communauté active

Qu'est-ce qui ne va pas avec Vaadin

  • La taille des fichiers JavaScript dynamiques peut augmenter, ce qui peut nécessiter un serveur plus volumineux
  • Étant donné que Vaadin est axé sur les affaires, vous ne pourrez peut-être pas créer de sites Web funky.

Exemple

Avec l'aide des composants Form, Datepitcker et combobox.sept

Google Maps angulaires

Angular Google Maps est un ensemble de directives et de services qui permettent aux développeurs d'utiliser les services Google Maps dans leurs applications Angular. Auparavant, l'utilisation de Google Maps dans Angular était une tâche stressante car la bibliothèque était chargée à l'aide d'une balise de script, de sorte que les définitions de type n'étaient pas facilement disponibles. Cela a entraîné des erreurs de compilation.

Mais, avec les directives Angular Google Maps, créer des cartes, des marqueurs, des formes, des lignes, des fenêtres, etc., est facilement possible. La bibliothèque propose également une fonction asynchrone qui permet de savoir si la bibliothèque Google Maps est chargée sur la page web.

Fonctionnalités

  • Afficher la latitude et la longitude sélectionnées
  • Ajouter et placer un marqueur
  • Afficher la position actuelle sur une carte
  • Définir la direction dans google map

Composants Google Maps angulaires

  • GoogleMap - Pour ajouter une carte Google
  • Marqueurs - Pour définir le marqueur pour définir les directions
  • MapTrafficLayer - Pour afficher le trafic avec quelques personnalisations
  • Zoom - Pour zoomer et dézoomer

Trouvez plus d'informations sur les composants de Google Maps ici https://github.com/angular/components/tree/main/src/google-maps .

Processus d'installation

https://angular-ui.github.io/angular-google-maps/#!/quickstart

Ce qui est bien avec Angular Google Maps

  • Permet une intégration fluide de Google Maps dans les applications Angular
  • Idéal pour les applications qui ont besoin de Google Maps

Ce qui est mauvais avec Angular Google Maps

  • Le module Angular Google Maps échoue parfois à s'afficher en production

Exemple

Avec l'aide de google map, composants de marqueurs -

8

nébulaire

Nebular est une bibliothèque d'interface utilisateur angulaire open-source et gratuite basée sur les spécifications Eva Design System . Cette bibliothèque contient plus de 40 composants d'interface utilisateur personnalisables, des modules d'authentification et de sécurité et quatre thèmes visuels, permettant aux marques d'intégrer de superbes designs.

Nebular n'a pas de dépendances tierces, ce qui signifie que vous pouvez implémenter des composants d'interface utilisateur angulaire plus rapidement et plus facilement pour créer une interface utilisateur réactive et visuellement attrayante pour les applications.

Fonctionnalités

  • Son code source est disponible gratuitement sous la licence MIT
  • Composants hautement personnalisables
  • Conception hautement modulaire

Composants nébulaires

  • Carte - Pour les boîtes de contenu normales avec différentes interfaces utilisateur
  • Mise en page - Pour afficher différents formulaires et sections dans la mise en page
  • Flip Card - Un clic retourne l'option de contenu
  • Accordéon - Texte masqué différentes options et interfaces utilisateur
  • Révéler la carte - Affichage du contenu en un clic
  • Stepper - Pour afficher le processus étape par étape
  • Liste infinie - Défilement infini

Obtenez plus d'informations sur les composants Nubular ici https://akveo.github.io/nebular/docs/components/components-overview

Processus d'installation

https://akveo.github.io/nebular/docs/auth/installation#installation

Ce qui est bien avec Nebular

  • Offre un excellent soutien
  • Compatible avec une gamme d'appareils
  • Il est sécurisé et facile à utiliser

Qu'est-ce qui ne va pas avec Nebular

  • N'a aucun inconvénient apparent

Exemple

Avec l'aide de formulaires, composants Stepper -

9

ag Grille

AG-Grid est la grille de données basée sur JavaScript la plus riche en fonctionnalités, la plus robuste et la plus rapide d'Angular, spécialement conçue pour offrir des performances exceptionnelles dès la sortie de la boîte. Il offre une solution complète avec des fonctionnalités pour répondre à la plupart des exigences sans nécessiter de dépendances tierces.

AG-Grid dispose également d'une documentation exceptionnelle pour garantir que chaque option de personnalisation et de fonctionnalité est incluse et décrite. Les interactions de l'interface utilisateur AG-Grid sont familières à la fonctionnalité de création de tableaux Excel, ce qui permet aux développeurs de démarrer facilement avec la grille angulaire.

Fonctionnalités

  • Facile à configurer
  • Intégration de données côté serveur
  • Exporter vers CSV et Excel
  • Cartographie intégrée
  • Composant piloté par les données

Certains composants de grille ag

  • Cell Renderer - Pour rendre les données à l'intérieur de la cellule du tableau
  • Composant de date - Pour rendre la date à l'intérieur de la cellule du tableau
  • Composant de filtre - Pour filtrer les données de cellule à l'intérieur d'un tableau
  • Filtre flottant - Identique aux fonctions de filtre mais avec flottant
  • Composant de barre d'état - Pour ajouter d'autres options de filtre à la barre d'état du tableau

Trouvez plus d'informations sur les composants ag Grid ici https://ag-grid.com/angular-data-grid/component-types/

Processus d'installation

https://www.ag-grid.com/javascript-data-grid/npm/

Ce qui est bien avec ag ​​Grid

  • Documentation complète
  • Bien maintenu
  • Facilité de personnalisation
  • API intuitive
  • Capable de gérer de grands ensembles de données

Ce qui est mauvais avec ag ​​Grid

  • Très peu de thèmes d'interface utilisateur prédéfinis

Exemple

Avec l'aide du composant Filtrage -

Dix

Toutes les bibliothèques sous forme tabulaire

BibliothèqueÉtoiles GitHubTéléchargements hebdomadairesDernière version
Matériau angulaire8.6K36K14.0.4
PAR Bootstrap7.9K407K13.0.0-beta.1
Amorçage NGX5.4K274K8.0
Interface utilisateur Onsen8.6K36.8K2.12.1
PrimeNG7.6K274K14.0.0
PAR la foudre9041.3K8.0
Vaadin49511K23.1.4
Google Maps angulaires22.8K96.2K14.0.5
nébulaire6740.0.1
ag Grille8.9K123K28.0.0

Conclusion

Voici quelques-unes des meilleures bibliothèques de composants angulaires à prendre en compte si vous envisagez de créer des applications angulaires robustes et prêtes pour l'avenir en 2022. Souvent, les développeurs évitent d'utiliser des bibliothèques externes, ce qui peut être acceptable dans certains cas, mais les bibliothèques externes peuvent réduire considérablement le temps de développement. et vous aider à proposer des solutions personnalisées. Cependant, la première tâche consiste à trouver la bonne bibliothèque qui correspond aux exigences de votre application et répond à votre objectif final.

Lien : https://blog.openreplay.com/top-10-angular-component-libraries

#angular #angularjs #javascript

10 Meilleures Bibliothèques De Composants angulaires Pour 2022
山田  千代

山田 千代

1660665317

2022 年 10 個最佳 Angular 組件庫

Angular是最傑出的框架之一,可讓您更快、更高效地構建前端 Web 應用程序。Angular 由 Google 開發,基於 Microsoft 開發和維護的流行編程語言 TypeScript,是許多專業開發人員構建 Web 應用程序的首選。在很短的時間內,這個開源的 Web 應用程序框架就贏得了全球許多 Web 開發人員和客戶的心。事實上,根據 BuiltWith 的說法,超過 300,000 個網站是基於 Angular 框架構建的。有助於加快 Web 開發過程的大量可重用和可訪問的組件庫使 Angular 成為首選。

讓我們看看一些流行的 Angular 組件庫,它們可以幫助您創建強大的 Web 應用程序和系統。

角材料

Angular Material 是 Angular 的一個官方組件庫,適用於Google 的 Material Design。這個庫是在 Angular 和 TypeScript 的幫助下創建的,具有一組可用於構建按鈕、對話框、底部工作表等的組件。它帶有大約 40 個組件,可用於創建完全可定制的主題和構建功能豐富的應用程序。

角材料的特點:

  • 方便使用的
  • 響應式應用
  • 直觀的 UI 組件
  • 跨平台兼容性

角材料組件:

  • 表單控件,例如自動完成、複選框、單選按鈕、輸入等。
  • 按鈕、圖標、進度條
  • 數據表格式
  • 導航欄、側邊導航和工具欄菜單
  • 不同類型的彈出窗口

想要查看更多 Angular 材質組件及其用法?你可以去https://material.angular.io/components/categories

安裝過程

https://material.angular.io/guide/getting-started

Angular 材質有什麼好處

  • 便於使用
  • 附帶優秀的文檔
  • 易於保持一致的設計

Angular 材質有什麼不好

  • 某些組件響應不夠
  • 在某些組件中過度使用或誤用ARIA
  • 為組件添加可訪問性不容易定制
  • 缺少導入所有組件的組件

例子

借助不同類型的 Table 組件 -

第一的

通過引導

NG-Bootstrap 是最流行的 UI 庫,完全使用 TypeScript 構建。這個組件庫被廣泛用於從上到下構建特定於 Angular 的小部件。這些小部件易於使用,除了 Bootstrap 和 Angular 之外不需要額外的知識。

與之前的版本不同,NG-Bootstrap 已經放棄了對 jQuery 的依賴,使 Bootstrap 4 CSS 成為它唯一的其他依賴項。實現大多數 JavaScript 組件是使用 Angular 和 Bootstrap 的理想解決方案。

特徵

  • 為應用程序提供專業的外觀和感覺
  • 易於訪問以與 Angular 4 及更高版本集成
  • 為您的前端增加響應能力
  • 它很輕

自舉組件

  • 按鈕 - 更改按鈕的外觀
  • 警報 - 使用不同的 UI 顯示警報消息
  • Carousel - 用於具有不同 UI 選項的滑動效果
  • DatePicker - 用戶可以選擇具有不同 UI 選項的日期
  • 折疊 - 一鍵折疊選項
  • 下拉菜單 - 從下拉菜單中選擇更多選項
  • 字體頭 - 根據用戶輸入的不同選擇
  • 模態 - 在用戶輸入後獲得類似彈出的感覺

想查看更多 NG Bootstrap 組件及其用法?你可以去https://ng-bootstrap.github.io/#/components

安裝過程

https://ng-bootstrap.github.io/#/getting-started

NG Bootstrap 有什麼好處

  • 龐大的開發者社區
  • 在 Angular 中使用的廣泛的小部件
  • 製作可在移動設備上無縫運行的精美網站

Bootstrap 有什麼不好

  • 需要有 Bootstrap 工作經驗才能開始使用 NG-Bootstrap
  • 通常,很難在代碼中找到問題
  • 不經常更新

例子

在 Form 和 Datepicker 組件的幫助下 -

2

NGX-引導程序

NGX-Bootstrap 是另一個流行的 Angular UI 組件庫,其中包含由 Angular 提供支持的所有核心 Bootstrap 組件。這意味著您不需要包含 JS 組件,但它使用 Bootstrap 提供的 CSS 和標記。NGX-Bootstrap 中的模塊化組件可以通過腳本進行調整和設置樣式,並通過 Accessible Rich Internet Applications (ARIA) 角色進行操作。

它是一個精心設計的框架,擴展了 Bootstrap 組件功能,允許開發人員在 Angular 應用程序中使用它們。由於 Bootstrap 組件是使用 Angular 開發的,因此它在所有設備上都提供了出色的性能。NGX Bootstrap 組件比原生 Bootstrap 更具可擴展性、模塊化和適應性。

特徵

  • 有用且易於理解的文檔
  • 無憂無慮的代碼
  • 每個組件都經過測試並支持最新的 Angular 版本

NGX-Bootstrap 組件

  • 分頁 - 顯示分頁的網站頁面
  • Accordion - 單擊後顯示隱藏的文本
  • Popover - 用戶輸入後的不同彈出選項
  • 進度條 - 顯示完成
  • 折疊 - 一鍵折疊內容
  • Carousel - 添加像 UI 一樣的滑塊

在此處獲取更多詳細信息及其用法https://valor-software.com/ngx-bootstrap/#/components

安裝過程

https://www.npmjs.com/package/ngx-bootstrap/v/5.1.0

NGX Bootstrap 有什麼好處

  • 有許多開箱即用的組件
  • 它有助於創建響應式 UI
  • 可以在具有相同性能水平的移動和桌面平台上運行

NGX Bootstrap 有什麼不好

  • 某些組件缺少輔助功能

例子

在分頁組件的幫助下 -

3

溫泉用戶界面

Onsen UI 是一個很棒的 Angular 組件庫,主要用於使用 JavaScript 為 Android 和 iOS 創建高質量的混合 Web 和移動應用程序。這個組件庫提供了可以與 Angular 框架結合的平面和材料設計。

Onsen UI 為開發人員提供強大的 CLI 和開發工具,以構建響應迅速的漸進式 Web 應用程序 (PWA) 和移動應用程序。令人難以置信的Angular 指令可根據您為項目選擇的平台啟用自動樣式設置。

特徵

  • Onsen UI 與 Monaca 配合得很好,Monaca是構建混合應用程序的絕佳平台
  • 針對移動設備優化的 CSS、JavaScript 和組件
  • 為材料和平面設計提供支持
  • 與 AngularJS 和 Angular 2+ 兼容

溫泉 UI 組件

  • 標籤欄 - 要顯示標籤,請選擇具有不同 UI 的選項
  • CheckBox - 使用具有不同 UI 的複選框獲取用戶輸入
  • 通知 - 與類似警報的功能相同
  • 卡片 - 為 UI 賦予卡片般的感覺

要獲取有關組件的更多信息,您可以訪問https://onsen.io/v2/api/css.html

安裝過程

https://onsen.io/v2/guide/installation.html

Onsen UI有什麼好處

  • 基於開源代碼構建
  • 簡單易學
  • 響應式佈局
  • 編譯 JavaScript 和 HTML5 代碼,無需開發人員以特定方式編寫

Onsen UI 有什麼不好

  • 免費調試器不可用
  • 小社區

例子

在 Gesture 和其他一些組件的幫助下——

4

PrimeNG

PrimeNG 是一個完整的 Angular 用戶界面套件。它提供了超過 80 個 UI 組件的豐富集合,這些組件不僅開源且免費使用,而且非常易於實現。PrimeNG 允許您從一系列專業設計的材料和平面主題中進行選擇,這些材料和平面主題具有高度響應性和触控優化,並在眾多移動設備上提供非凡的性能。

PrimeNG 與其他組件相比的主要優勢在於 PrimeNG 提供了多種自定義選項,並允許開發人員以他們想要的方式輕鬆訪問它。您可以立即開始使用高度可定制的原生 Angular CLI 應用程序模板。

特徵

  • 有 80 多個組件可供選擇
  • 所有小部件都是免費和開源的
  • 應用程序的專業外觀和感覺的一系列主題

PrimeNG 組件

  • 按鈕和拆分按鈕
  • 文件上傳組件
  • 圖表 - 餅圖、條形圖、折線圖和甜甜圈
  • 帶有 Growl 和 Messages 的警報消息
  • 數據組件 - DataTable、DataList 和 DataGrid
  • 覆蓋組件——對話框、燈箱和覆蓋面板

在安裝過程 URL 下獲取有關 PrimeNg 不同組件的更多信息。

安裝過程

https://primefaces.org/primeng/setup

PrimeNG有什麼好處

  • 所有組件的單一庫
  • PrimeNG 組件支持模板化
  • 一系列主題可供選擇
  • 頻繁的維護更新

PrimeNG有什麼不好

  • 文檔不一致
  • 它只接受用於錯誤修復的開源貢獻,但不接受功能
  • 很少有組件濫用或過度使用可訪問的富 Internet 應用程序

例子

在表單編輯器組件的幫助下 -

5

作者:閃電

NG-Lightning 是另一個用 TypeScript 編寫的頂級 Angular 組件庫,建立在 Angular 和Salesforce 的 Lightning 設計系統之上。這個庫組件的主要目的是為 Lightning 設計系統提供原生 Angular 指令和組件。

NG-Lightning 在無狀態功能組件上工作,這些組件依靠其輸入屬性來根據您的應用程序需求提供增強的性能、靈活性和無縫集成。

特徵

OF閃電組件

  • 麵包屑 - 顯示下一頁和上一頁
  • Spinners - 以圓形旋轉的形式顯示正在進行的工作
  • 徽章 - 以不同的 UI 顯示不同類型的徽章
  • 圖標 - 不同的圖標以不同的形狀和大小顯示
  • Datatables - 類似於具有不同 UI 選項的 Table 組件
  • DatePickers - 用於具有不同 UI 的日期選擇
  • 表單 - 來自用戶輸入的編輯器
  • 評分 - 使用不同的 UI 顯示不同類型的用戶評分
  • 查找 - 用戶輸入後的搜索查找

以及有關不同 PrimeNG 組件的更多信息在這裡https://ng-lightning.github.io/ng-lightning/#/components/

安裝過程

https://www.npmjs.com/package/ng-lightning

NG閃電有什麼好

  • 開發人員可以轉譯 TypeScript 代碼並上傳 JavaScript 代碼
  • 它可以創建網頁並將其顯示在 Canvas 應用程序中

NG閃電有什麼不好

例子

借助 Notification、Pagination 組件

6

瓦丁

Vaadin 提供了非常適合構建移動和桌面應用程序的企業級組件。借助可訪問和主題化的組件,開發人員可以更快、更高效地構建應用程序。Vaadin 還附帶 Figma - 一個高質量的庫,可以輕鬆創建基於 Vaadin 的 UI 原型。

Vaadin 基於開放的 W3C Web 組件標準,這意味著它可以在所有最新的瀏覽器上無縫運行,並且可以與任何前端框架一起使用。

特徵

  • Figma 庫,這是一個用於創建原型的高質量庫
  • 一個好的設計系統
  • 它提供超過 45 個組件
  • 它完全是面向對象的

Vaadin 組件

  • 29種不同類型的圖表
  • 具有排序、過濾、下拉和下拉等功能的 DataGrid
  • 可過濾的下拉字段
  • 日期選擇器選擇具有不同 UI 的日期
  • 上傳 - 上傳文件
  • 地圖 - 為用戶添加帶有放大和縮小選項的地圖
  • 登錄 - 使用不同的 UI 選項獲取用戶登錄憑據

有關 Vaadin 組件的更多信息在這裡https://vaadin.com/docs/latest/components

安裝過程

https://vaadin.com/docs/latest/guide/quick-start

Vaadin有什麼好處

  • 加快開發進程
  • 移動友好
  • 易於學習和導航
  • 綜合文檔
  • 活躍的社區

Vaadin有什麼不好

  • 動態 JavaScript 文件的大小可能會增加,這可能需要更大的服務器
  • 由於 Vaadin 專注於業務,您可能無法創建時髦的網站

例子

借助 Form、Datepitcker 和組合框組件。7

角谷歌地圖

Angular Google Maps 是一組指令和服務,使開發人員能夠在其 Angular 應用程序中使用Google Maps 服務。早些時候,在 Angular 中使用 Google 地圖是一項壓力很大的任務,因為該庫是使用腳本標籤加載的,因此類型定義並不容易獲得。這導致編譯錯誤。

但是,使用 Angular Google Maps 指令,可以輕鬆創建地圖、標記、形狀、線條、窗口等。該庫還提供了一個異步功能,使您能夠了解網頁上是否加載了 Google 地圖庫。

特徵

  • 顯示選定的緯度和經度
  • 添加和放置標記
  • 在地圖上顯示當前位置
  • 在谷歌地圖中設置方向

Angular 谷歌地圖組件

  • GoogleMap - 添加谷歌地圖
  • 標記 - 設置標記以設置方向
  • MapTrafficLayer - 通過一些自定義顯示流量
  • 縮放 - 用於放大和縮小

在https://github.com/angular/components/tree/main/src/google-maps中查找有關 google 地圖組件的更多信息。

安裝過程

https://angular-ui.github.io/angular-google-maps/#!/quickstart

Angular 谷歌地圖有什麼好處

  • 在 Angular 應用程序中實現 Google 地圖的平滑集成
  • 非常適合需要 Google 地圖的應用

Angular 谷歌地圖有什麼不好

  • Angular Google Maps 模塊有時無法在生產中呈現

例子

在谷歌地圖的幫助下,標記組件 -

8

星雲

Nebular 是一個基於Eva 設計系統規範的開源免費 Angular UI 庫。該庫包含 40 多個可定制的 UI 組件、身份驗證和安全模塊,以及四個視覺主題,讓品牌可以融入精美的設計。

Nebular 沒有第三方依賴項,這意味著您可以更快、更輕鬆地實現 Angular UI 組件,為應用程序創建響應式和視覺上吸引人的 UI。

特徵

星雲組件

  • Card - 用於具有不同 UI 的普通內容框
  • 佈局 - 在佈局中顯示不同的表單和部分
  • 翻轉卡片 - 一鍵翻轉內容選項
  • Accordion - 隱藏文本不同的選項和 UI
  • Reveal Card - 一鍵式內容展示
  • Stepper - 顯示一步一步的過程
  • 無限列表 - 無限滾動

在此處獲取有關 Nubular 組件的更多信息https://akveo.github.io/nebular/docs/components/components-overview

安裝過程

https://akveo.github.io/nebular/docs/auth/installation#installation

星云有什麼好處

  • 提供大力支持
  • 與一系列設備兼容
  • 它安全且易於使用

星云有什麼不好

  • 沒有明顯的缺點

例子

在表單的幫助下,Stepper 組件 -

9

農業網格

AG-Grid 是 Angular 功能最豐富、最健壯、最快的基於 JavaScript 的數據網格,專門設計用於提供開箱即用的卓越性能。它提供了一個成熟的解決方案,其功能可以滿足大多數要求,而無需第三方依賴項。

AG-Grid 還具有出色的文檔,以確保包含和描述每個自定義和功能選項。AG-Grid UI 交互熟悉 Excel 表格創建功能,使開發人員可以輕鬆開始使用 Angular 網格。

特徵

  • 易於配置
  • 服務器端數據集成
  • 導出為 CSV 和 Excel
  • 綜合圖表
  • 數據驅動組件

一些農業網格組件

  • 單元格渲染器 - 渲染表格單元格內的數據
  • 日期組件 - 在表格單元格內呈現日期
  • 過濾器組件 - 過濾表格內的單元格數據
  • 浮動過濾器 - 與過濾器功能相同,但帶有浮動
  • 狀態欄組件 - 將其他過濾器選項添加到表格狀態欄

在此處查找有關 ag Grid 組件的更多信息https://ag-grid.com/angular-data-grid/component-types/

安裝過程

https://www.ag-grid.com/javascript-data-grid/npm/

ag Grid有什麼好處

  • 綜合文檔
  • 維護良好
  • 易於定制
  • 直觀的 API
  • 能夠處理大型數據集

ag Grid有什麼不好

  • 很少有預建的 UI 主題

例子

在過濾組件的幫助下 -

十

表格形式的所有庫

圖書館GitHub 星星每週下載最新版本
角材料8.6K36K14.0.4
通過引導7.9K407K13.0.0-beta.1
NGX 引導程序5.4K274K8.0
溫泉用戶界面8.6K36.8K2.12.1
PrimeNG7.6K274K14.0.0
作者:閃電9041.3K8.0
瓦丁49511K23.1.4
角谷歌地圖22.8K96.2K14.0.5
星雲6740.0.1
農業網格8.9K123K28.0.0

結論

如果您計劃在 2022 年構建健壯且面向未來的 Angular 應用程序,這些是您應該考慮的一些最佳 Angular 組件庫。開發人員通常會避免使用外部庫,這在某些情況下可能是可以接受的,但外部庫可以顯著減少開發時間並幫助您提供定制的解決方案。但是,首要任務是找到符合您的應用程序要求並滿足您的最終目的的正確庫。

鏈接:https ://blog.openreplay.com/top-10-angular-component-libraries

#angular #angularjs #javascript

2022 年 10 個最佳 Angular 組件庫