Giter VIP home page Giter VIP logo

angular2-focus's Introduction

angular2-focus

Angular attribute directive that gives focus on an element depending on a given expression.

Build Status version PRs Welcome All Contributors Greenkeeper badge

Install

npm install --save angular2-focus

Example

import {NgModule, Component} from '@angular/core';
import {FocusModule} from 'angular2-focus';

@Component({
  template: `
    <input type="text" focus="true">
  `
})
class AppComponent { }

@NgModule({
  imports: [FocusModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Check the docs for examples using @angular/forms and other third party libraries such as @ng-bootstrap/ng-bootstrap, to focus elements when e.g. using a modal.

Contributors

Thanks goes to these wonderful people (emoji key):


Spyros Ioakeimidis

💬 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

angular2-focus's People

Contributors

dependabot[bot] avatar greenkeeper[bot] avatar spirosikmd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

angular2-focus's Issues

An in-range update of awesome-typescript-loader is breaking the build 🚨

Version 3.0.5 of awesome-typescript-loader just got published.

Branch Build failing 🚨
Dependency awesome-typescript-loader
Current Version 3.0.4
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As awesome-typescript-loader is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details
Commits

The new version differs by 3 commits .

  • 02938eb chore(release): 3.0.5
  • 7faa258 Merge pull request #376 from sod/feature/update-loader-utils
  • 9fbc5b3 update loader-utils to ^1.0.2

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Getting an error of a badly packaged library, after upgrading to angular 5

ERROR in ./node_modules/angular2-focus/src/focus.module.ts
Module build failed: Error: C:\loltlv\node_modules\angular2-focus\src\focus.module.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an is
sue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (C:\loltlv\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:674:23)
at plugin.done.then (C:\loltlv\node_modules@ngtools\webpack\src\loader.js:467:39)
at process._tickCallback (internal/process/next_tick.js:109:7)
ERROR in ./node_modules/ng2-file-drop/index.ts
Module build failed: Error: C:\loltlv\node_modules\ng2-file-drop\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconf
ig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an is
sue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (C:\loltlv\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:674:23)
at plugin.done.then (C:\loltlv\node_modules@ngtools\webpack\src\loader.js:467:39)
at process._tickCallback (internal/process/next_tick.js:109:7)

An in-range update of typescript is breaking the build 🚨

Version 2.4.1 of typescript just got published.

Branch Build failing 🚨
Dependency typescript
Current Version 2.4.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As typescript is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes TypeScript 2.4

For release notes, check out the release announcement

For new features, check out the What's new in TypeScript 2.4.

For breaking changes, check out the Breaking changes in TypeScript 2.4 page.

For the complete list of fixed issues, check out the fixed issues query for Typescript 2.4.

Download:

Commits

The new version differs by 141 commits.

  • 8b2fe13 Update LKG.
  • 14d95ed Test:Block-scoped definition of Promise works
  • a8846bf Skip block scope check with no error location
  • 44f2336 Merge pull request #16633 from Microsoft/release-2.4_fixIncrementalParsing
  • 4875a27 Add tests
  • 15ef20d Set the structureReused to be safemoudles when dynamic import change
  • 6d33083 Add tests
  • 11b9f6e Wip-fix incremental parsing
  • 2721fd4 In TypeScript code, never bind JSDoc normally, just set parent pointers (#16555) (#16561)
  • 0968ed9 Revert string enum changes (#16569)
  • 096f8cc Update LKG
  • 9241175 Allow running in strict mode (#16557)
  • f49b007 Update LKG
  • f1b0f59 Update version to 2.4.1
  • ed9cde9 Update LKG

There are 141 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

  • Replaced the old Node.js version in your .nvmrc with the new one

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

  • engines was only updated if it defined a single version, not a range.
  • .nvmrc was updated to Node.js 10
  • .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖


FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Error recieved with Angular-CLI 1.5.0 build converting t Angular 5.0

I get the following error when running NG Build on Angular-CLI 1.5.0. I was converting over to Angular 5.0. When I removed module everything worked.

ERROR in TypeError: staticSymbol.assertNoMembers is not a function
at AotSummaryResolver.resolveSummary (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:31928:22)
at CompileMetadataResolver._loadSummary (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:14709:66)
at CompileMetadataResolver.isDirective (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:15003:23)
at CompileMetadataResolver._getTypeDescriptor (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:15269:18)
at C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:15131:78
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:15114:49)
at visitLazyRoute (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:29937:104)
at AotCompiler.listLazyRoutes (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler\bundles\compiler.umd.js:29905:20)
at AngularCompilerProgram.listLazyRoutes (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler-cli\src\transformers\program.js:157:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@angular\compiler-cli\src\ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:246:66)
at Promise.resolve.then.then (C:\Users\Gary\WebstormProjects\ConstituentManager2\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:542:50)
at

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.


Good luck with your project ✨

Your semantic-release bot 📦🚀

update to angular 6

hello guys, Do you plan to update this library? to be compatible with angular 6

Pressing Enter is invoking incorrect execution

Describe the bug
I have a dynamic form in which controls are generated dynamically. Here is a sample control:
<mat-form-field class="form-field" [hintLabel]="formEditorModel.hint">
<mat-label>{{formEditorModel.label}}</mat-label>
<input matInput type="text" autocomplete="off" focus="{{formEditorModel.autoFocus}}" placeholder="{{formEditorModel.placeHolder}}" formControlName="{{formEditorModel.key}}" [required]="formEditorModel.required">
<button tabindex="-1" *ngIf="form.controls[formEditorModel.key].value" (click)="form.controls[formEditorModel.key].reset()" matSuffix mat-icon-button aria-label="Clear"> <mat-icon>close</mat-icon> </button>
<mat-error>{{GetFormError()}}</mat-error>
<mat-hint align="end">{{GetHint()}}</mat-hint>
</mat-form-field>

As you can see I have used the angular material here. I have a mat-form-field. Inside that there are usual components like Label, Input, Suffix clear button, Error text and Hint text.

Form has a submit button and a reset/cancel button. Submit button is the default action and works correctly. When the focus directive is not used and we enter data into the control and hit enter, the form is submitted. But when focus is used and we hit enter, the suffix clear button is clicked and the data entered in the control is cleared.

To Reproduce
Steps to reproduce the behavior:
Add the provided mat-form-field in a angular 6 material form.
Enter some data into the input control
Press Enter/return button

Entered text gets cleared.

Expected behavior
Not to focus on Any suffix button in mat-form-field when the focus is on the control. So that when we press enter it calls the default form action and not any unwanted things.

Screenshots
image

Desktop (please complete the following information):

  • OS: windows 10 pro
  • Browser Google Chrome
  • Version 67

An in-range update of @angular/core is breaking the build 🚨

Version 4.2.2 of @angular/core just got published.

Branch Build failing 🚨
Dependency @angular/core
Current Version 4.2.1
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

@angular/core is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Reset focus not working

Focus works perfectly fine when enabled at first, if i try to make focus false and then add true again nothing happens but ng-reflect seems to update the state from false to true but the element doesnt not get focused

To Reproduce
Steps to reproduce the behavior:

  1. Make the focus property false initially
  2. Make the property true, the element should be focused now
  3. Make the property false
  4. Now make it true again

Expected behavior
The element should be focused again

Focus directive breaks scroll

I can't give you example, because it is very specific. I used focus directive in the cell of infinity scroll table and it corrupted scroll. The same directive has same problem. Fortunately, there is good decision:

setTimeout(() => {
    this.giveFocus();
})

Use setTimeout! I made several components with focus (oi.select one of them) and I had same problems. In Angular, React, Vanilla etc. and I understood the main thing - newer use set focus without setTimeout. This is one of rare places where its use is justified

An in-range update of @types/core-js is breaking the build 🚨

Version 0.9.37 of @types/core-js just got published.

Branch Build failing 🚨
Dependency @types/core-js
Current Version 0.9.36
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As @types/core-js is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

An in-range update of rxjs is breaking the build 🚨

Version 5.3.2 of rxjs just got published.

Branch Build failing 🚨
Dependency rxjs
Current Version 5.3.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As rxjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Can't focus to other elemenets

Hi @spirosikmd,

I used this module and config successful. Then user can't focus other elements! It really is wrong :3
I think that it just should focus the first time 👍

Regards,
Max

ng 4 + this library wont execute

get Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.

indeed in my app.module.ts, I have
import { FocusModule } from 'angular2-focus';

imports....
FocusModule.forRoot()

Can you advise?

An in-range update of browserify is breaking the build 🚨

Version 14.2.0 of browserify just got published.

Branch Build failing 🚨
Dependency browserify
Current Version 14.1.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As browserify is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Commits

The new version differs by 5 commits .

  • 18e1d65 14.2.0
  • 0e1a7a0 add cli support for --transform-key to support mode's like production/staging/etc..
  • a5aa660 Merge pull request #1701 from wogsland/doc-fix
  • ae281bc Fixed documentation formatting that was bugging me
  • fe8c57b async test for node 7

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.