text:
Typeahead > Selection is not visible when the suggestion list is scrollable

I have very large data set, I define a width to the dropdown view.
But when I navigate in the list with keyboard, the implementation did not care about scrollable suggestions view.

I just confirmed this is still an issue with the current master branch and the latest Bootstrap CSS:
http://plnkr.co/edit/DJy5k5uNWHSTqtAFUgVM?p=preview

I have faced with the same problem.
Does anyone found a solution?

The problem at heart is in the dropdown component - the current dropdown does not allow for it being scrollable.

This is currently able to be worked around by applying
.dropdown-menu {
  overflow: scroll;
}

in the CSS.

In light of this workaround, I believe that this should remain a pure CSS fix and not be handled in the library - closing as a consequence.

I think this issue should be reopened / reconsidered.
If the developer modifies the ".dropdown-menu" class to be "overflow: scroll" as stated above by @wesleycho, the user will be able to arrow through a large set of items. However, as the user keyboard arrows down in the overflowed container, the scroll position of the overflowed container remains the same, and the user cannot see which items get the active class, which amounts to a bad user experience. This is a bug that the "workaround" above does not solve.

Looks like #4128 is related to this.

I pieced a couple of fixes together to resolve this.  Seems that one of the original fixes wasn't working when main window already had a scrollbar.
http://stackoverflow.com/a/32464420/357455
Maybe someone would be willing to clean it up.

@ewahner thanks for the fix. removing ng-mouseenter is also causing an unexpected behavior. With typeahead-focus-first which defaults to true is not set to false, using mouse click to select an item will never get selected. the first item in the list is always selected.

@KennedyIhe  Someone created a workaround on Stackoverflow that doesn't modify AngularUI's sources, at least his plunker seems to work just fine.
http://stackoverflow.com/questions/27705490/up-down-arrow-key-issue-with-typeahead-control-angular-bootstrap-ui/32464420#32464420

Hello All,
The solution provided at http://stackoverflow.com/questions/27705490/up-down-arrow-key-issue-with-typeahead-control-angular-bootstrap-ui/32464420#32464420 is for depreciate typeahead. Is there any work around for uib-typeahead?
Thanks!

This is implemented in a1355e76874a68e65d9b481fa42de335d7349b98

I tried the solution that @wesleycho mentioned and it didn't work at all for me.  On pages that span below the fold it will cause the whole page to scroll.  I created a solution that seems to work for me.  I do wish this issue would be resolved so I can start taking latest versions without seeing this popup again.
Stack Overflow: Angular ui-bootstrap typeahead suggestion - scroll

Do not ask about this,
just try it
$('div.class').keydown(function (e) {
    if ($('div.class').is(':visible')) {
        var searchTab = $('ul.class');
        var selectedElement = $('ul.class');

        var elementHeight = selectedElement.outerHeight();
        var scrollTop = searchTab.scrollTop();
        var searchTabHeight = searchTab[0].scrollHeight;
        var offsetTop = 0;
        if (selectedElement.length != 0)
            offsetTop = selectedElement[0].offsetTop;

        if (e.keyCode === 38) {
            if (scrollTop != 0) {
                if (scrollTop >= offsetTop) {
                    searchTab.scrollTop(scrollTop - elementHeight);
                }
            }
            else {
                if (offsetTop + elementHeight + 2 === searchTabHeight) {
                    searchTab.scrollTop(searchTabHeight);
                }
            }
        }
        else if (e.keyCode === 40) {
            if (offsetTop === 0)
                searchTab.scrollTop(0);
            else if (offsetTop - scrollTop > elementHeight * 9)
                searchTab.scrollTop(scrollTop + elementHeight);
        }
    }
});

goodluck

Do not ask about this,
just try it
$('div.class').keydown(function (e) {
    if ($('div.class').is(':visible')) {
        var searchTab = $('ul.class');
        var selectedElement = $('ul.class');

        var elementHeight = selectedElement.outerHeight();
        var scrollTop = searchTab.scrollTop();
        var searchTabHeight = searchTab[0].scrollHeight;
        var offsetTop = 0;
        if (selectedElement.length != 0)
            offsetTop = selectedElement[0].offsetTop;

        if (e.keyCode === 38) {
            if (scrollTop != 0) {
                if (scrollTop >= offsetTop) {
                    searchTab.scrollTop(scrollTop - elementHeight);
                }
            }
            else {
                if (offsetTop + elementHeight + 2 === searchTabHeight) {
                    searchTab.scrollTop(searchTabHeight);
                }
            }
        }
        else if (e.keyCode === 40) {
            if (offsetTop === 0)
                searchTab.scrollTop(0);
            else if (offsetTop - scrollTop > elementHeight * 9)
                searchTab.scrollTop(scrollTop + elementHeight);
        }
    }
});

goodluck

I think I've nailed it..?
Typescript follows:
$(document).on('keydown', 'input.typeahead', e => {
var $elements = $(e.currentTarget).nextAll('.typeahead.dropdown-menu').first();
var $element = $elements.find('.active').first();
if ($elements.length && $element.length) {
var $firstElement = $elements.children().first();
var $lastElement = $elements.children().last();
var scrollTop = $elements.scrollTop();
var scrollBottom = scrollTop + $elements.height();
var topPadding = $firstElement.position().top + $elements.scrollTop();
var bottomPadding = $elements.get(0).scrollHeight
- ($lastElement.position().top + $lastElement.outerHeight() + $elements.scrollTop());
var elementTop = $element.position().top + scrollTop;
var elementBottom = elementTop + $element.outerHeight();
if (elementBottom - bottomPadding > scrollBottom) {
$elements.scrollTop(scrollTop + (elementBottom - scrollBottom) - bottomPadding);
}
if (elementTop - topPadding < scrollTop) {
$elements.scrollTop(elementTop - topPadding);
}
}
});

authors: AmirReza1512 DemetrisLeptos KennedyIhe PiyushRamuka TalD edgartrs ewahner jdecool rvanbaalen webilhan wesleycho


text:
refactor(tab): change to use centralized active state

Change to store active index on tabset controller
Set index on tab by tab basis

BREAKING CHANGE: The tab API is changed - please refer to the
documentation on new usage of tabs
This implements the hardest part of #4836.

Apart from those two points, works for me.

source: gharchive/pull-request

authors: Foxandxss wesleycho

repo: angular-ui/bootstrap

license: MIT

license_type: permissive

license_source: github-api


text:
Documentation : Datepicker afterTomorrow fixed

After tomorrow shows the wrong date if the date is the last day of the month.

This is confusing - afterTomorrow is two days after today, JS automatically does month adjustments. Could something else be going on here?

take today for example when afterTomorrow first gets created from new Date() it is 31 March 2016. Then we set it's date to (tomorrow.getDate() + 1) which is 2 since javascript automatically corrected tomorrow(1 April 2016)'s date variable. However, the month variable in the afterTomorrow is still inherited from new Date(); which is still 31 March. So afterTomorrow is now equals 2 March 2016 instead of 2 April 2016.

Ahh, now I see what was going on - this new change is good, thanks for this catch!

authors: tteke wesleycho


text:
Combination of Required/Optional Query Parameters

I am having some trouble defining a combination of required/optional parameters for a state.
Assume I have a state 'myPage' with three params - param1, param2, param3.
To navigate to the state I would like to require that param1 be defined in the url, while param2 and param3 can be optionally defined. If a user hits '/myPage' I want to handle the case using $urlRouterProvider.otherwise.
$stateProvider
   ...
   .state('myPage', {
      url: '/myPage?param1&param2&param3',
      templateUrl: 'app/myPage.view.html',
   });

$urlRouterProvider.otherwise(function($injector, $location) {
   // handle routing for accessing unknown route
});

I've seen people talk about using a params object with squashing and setting a default value, but I have been unsuccessful in getting that to work.
I believe I could accomplish this using a regex, but this seems error prone.
I also have a requirement that my urls must use query parameters

This is a better question to ask on stackoverflow as its an implementation detail and not a ui-router bug.

source: gharchive/issue

authors: eddiemonge jasteph

repo: angular-ui/ui-router


text:
Bootstrap theme is not working with multiple selections

Bug description:
When using multiple the bootstrap design is off. Watch the plunker to see how it should look and see how it actually looks when using multiple selections
Link to minimally-working plunker that reproduces the issue:
http://plnkr.co/edit/dmHphdL9UK8sBjc2cCwS?p=preview
Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS
"angular": "~1.4.0",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"bootstrap-sass-official": "~3.1.1",
"bootstrap": "~3.1.1",
"bootstrap-social": "~4.9.1",
"angular-resource": "~1.4.0",
"angular-cookies": "~1.4.0",
"angular-sanitize": "~1.4.0",
"angular-bootstrap": "~1.1.2",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.7.0",
"angular-ui-router": "~0.2.15",
"angular-validation-match": "~1.5.2",
"angular-toastr": "~1.6.0",
"angular-animate": "~1.4.8",
"angular-datatables": "^0.5.3",
"ui-select": "angular-ui-select#^0.16.1"

design is off
Sorry this isn't a very good description of what the actual problem is. Can you provide more detail? What is wrong? What does not work? Etc. this will make it easier to diagnose the problem.

Thanks for the extra detail and repro, just need more information about what the actual problem is.

Please look at my plunker and see how the left padding is off (compared to real bootstrap input). Look at a real bootstrap form-control and how the text padding is not the same when using multiple in this plugin.

I see what you mean now. I suppose this was done to prevent selected items from having a big gap at the start.
Any fix would need to look acceptable with and without selected items.

It's not just the padding,. all bootstrap styles are lost (such as blue halo, etc..) when adding the "multiple" keyword.

authors: boltex lydemeister user378230

repo: angular-ui/ui-select

license: mit

license_source: bigquery


text:
Error With MEAN.JS

just default setting and first select sample from documentation throw this error:
TypeError: undefined is not a function
at Object.compile (http://localhost:3000/lib/angular-ui-select2/src/select2.js:20:25)
at applyDirectivesToNode (http://localhost:3000/lib/angular/angular.js:6466:32)
at compileNodes (http://localhost:3000/lib/angular/angular.js:6036:15)
at compileNodes (http://localhost:3000/lib/angular/angular.js:6048:15)
at compileNodes (http://localhost:3000/lib/angular/angular.js:6048:15)
at compileNodes (http://localhost:3000/lib/angular/angular.js:6048:15)
at compile (http://localhost:3000/lib/angular/angular.js:5969:15)
at http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3324:20
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:6704:13)
at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:6098:13)
I have no idea what's wrong I'm doing...
everything is installed as well and all references are included right

I was also getting same error. But, I have found the solution for that.
You need to required insert script files in sequence.
You can find sequance below :
jquery/dist/jquery.js
select2/select2.js
/* Start adding all angular js /
angular.js
...
...
/ End adding all angular js */
angular-ui-select2/src/select2.js

Thanks for the solution

authors: PowerKiKi bhaveshvavdiya djindjic


text:
[ui-mask] Add the ability to keep the masked value in the model

My mask is "?999.9999.9999.99"
I enter the following value: "111.2222.333.44"
Currently ui-util will removes the dots and bind the value "111222233344"
I want to keep the dots in the bound value.

Closing as duplicates

authors: PowerKiKi naku

repo: angular-ui/ui-utils


text:
Change attr and style

Hi @comewalk, @evmar :)
I need to change the class attribute and add a style to an element as they advise me is the best way to do it, at this time I change the class attribute as well but it does not seem optimal to me.
app.component.ts
import { Component, OnInit  } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.pug',
	styleUrls: ['./app.component.styl']
})
export class AppComponent  {

	title = 'app'
	classService = "col-sm-12 col-md-6 col-lg-3 inactive"
	classService1 = "col-sm-12 col-md-6 col-lg-3 inactive"
	classService2 = "col-sm-12 col-md-6 col-lg-3 inactive"
	classService3 = "col-sm-12 col-md-6 col-lg-3 inactive"
	classService4 = "col-sm-12 col-md-6 col-lg-3 inactive"
	classServiceActive = "col-sm-12 col-md-12 col-lg-6 active"
	classServiceInactive = "col-sm-12 col-md-4 col-lg-2 inactive"

	toggleService(x){
		switch (x) {
			case 1:
				this.classService1=(this.classService1 === this.classService) ? this.classServiceActive : this.classService;
				this.classService2=(this.classService2 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService3=(this.classService3 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService4=(this.classService4 === this.classService) ? this.classServiceInactive : this.classService;
			break;
			case 2:
				this.classService1=(this.classService1 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService2=(this.classService2 === this.classService) ? this.classServiceActive : this.classService;
				this.classService3=(this.classService3 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService4=(this.classService4 === this.classService) ? this.classServiceInactive : this.classService;
			break;
			case 3:
				this.classService1=(this.classService1 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService2=(this.classService2 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService3=(this.classService3 === this.classService) ? this.classServiceActive : this.classService;
				this.classService4=(this.classService4 === this.classService) ? this.classServiceInactive : this.classService;
			break;
			case 4:
				this.classService1=(this.classService1 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService2=(this.classService2 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService3=(this.classService3 === this.classService) ? this.classServiceInactive : this.classService;
				this.classService4=(this.classService4 === this.classService) ? this.classServiceActive : this.classService;
			break;
		}
	}

}

app.component.pug
app-layout
	.row#services
		.service((click)="toggleService(1)", class="{{ classService1 }}")
			.service-text
				h2 title
				p description
				button.fa.fa-arrow-right
					span more
		.service((click)="toggleService(2)", class="{{ classService2 }}")
			.service-text
				h2 title
				p description
				button.fa.fa-arrow-right
					span more
		.service((click)="toggleService(3)", class="{{ classService3 }}")
			.service-text
				h2 title
				p description
				button.fa.fa-arrow-right
					span more
		.service((click)="toggleService(4)", class="{{ classService4 }}")
			.service-text
				h2 title
				p description
				button.fa.fa-arrow-right
					span more

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.
If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

authors: clydin geometry-matteoquintero

repo: angular/angular-cli


text:
@alan-agius4 <-- Closed question --> ng-packagr@4.4.0 requires a peer of [missing peer version] but none is installed. <-- still unanswered/please reopen

Bug Report or Feature Request (mark with an x)
- [x ] bug report -> please search issues before submitting (posted issue here but received incorrect answer --> https://github.com/angular/angular-cli/issues/13036

Issue still persists!
Command (mark with an x)
- [ x ] npm install ng-packagr

Versions

Output from:
node --version --> v8.12.0
npm --version --> 6.4.1
ng --version  -->
Angular CLI: 7.0.3
Node: 8.12.0
OS: win32 x64
Angular: undefined
Package                      Version
@angular-devkit/architect    0.10.3 (cli-only)
@angular-devkit/core         7.0.3 (cli-only)
@angular-devkit/schematics   7.0.3 (cli-only)
@ngtools/json-schema         1.1.0
@schematics/angular          7.0.3 (cli-only)
@schematics/update           0.10.3 (cli-only)
ng-packagr                   4.4.0
rxjs                         6.3.3
typescript                   2.5.2
webpack                      4.26.0
Windows (10)
Repro steps

In terminal running npm i ng-packagr command results in issue.
The log given by the failure

Desired functionality

No warning in CLI when installing package
Mention any other details that might be useful

Posted this issue about a week ago...
https://github.com/angular/angular-cli/issues/13036... but got an incorrect answer and issue was closed right after that.
@alan-agius4 --> I'd like you to take a look at my new posts and get back to me with a viable solution as the answer you posted is incorrect. Also I'd appreciate it if the issue wasn't closed until there was some kind of common understanding that the issue is actually solvable with the given answer. As such I'd kindly ask you to reopen and not to close before that status is achieved. Thanks.

Will reply in the other issue.


text:
Angular Cli 1.0.0-beta.11-webpack.8: ng build failed if route 'loadChildren'

https://github.com/angular/angular-cli/blob/master/addon/ng2/models/find-lazy-modules.ts#L38
.map((node: ts.PropertyAssignment) => {
        return JSON.parse(node.initializer.getText(source)); // tslint:disable-line
      });

JSON.parse failed with ：
loadChildren:'app/+workspace/+settings/settings.module#SettingsModule'

"Unexpected token ' in JSON at position 0". :)

Can confirm and reproduce. Moving to   ` removes the error, but causes routing to fail.

Do lazy modules work with a system.js build?

@monojack yes, works before update to angular-cli@webpack

Same same.

angular-cli: 1.0.0-beta.11-webpack.8
node: 6.4.0
os: win32 x64

I believe the latest webpack branch ( beta.11-webpack.8 ) does not currently support lazy loaded modules yet.

I believe the latest webpack branch ( beta.11-webpack.8 ) does not currently support lazy loaded modules yet.

You are correct in a way.  RC5 apparently uses System.js to do the lazy loading, since the CLI moved to Webpack that method is unavailabled.   It looks like the RC2 router and RC6 resolve the issue.  Unfortunately for me, the Angular 2 Material team is a bit out of sync, so I can't upgrade to RC6 yet.
I worked around it and implemented a basic async module loader for the time being.

authors: LibertyBeta cuiliang mjolk monojack shaun-mason splintercode


text:
ng new installation fails using npm 7

🐞 Bug report
Command (mark with an x)

[x] new
[ ] build
[ ] serve
[ ] test
[ ] e2e
[ ] generate
[ ] add
[ ] update
[ ] lint
[ ] extract-i18n
[ ] run
[ ] config
[ ] help
[ ] version
[ ] doc

Is this a regression?
Unknown

 Yes, the previous version in which this bug was not present was: ....
Description
ng new angular-tour-of-heroes results in an NPM error regarding the version of jasmine-core Angular wants and the version karma-jasmine-html-reporter wants when using npm 7.
 A clear and concise description of the problem...
🔬 Minimal Reproduction

Install npm 7
Run ng new angular-tour-of-heroes with all default values.

🔥 Exception or Error

⠏ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-tour-of-heroes@0.0.0
npm ERR! Found: jasmine-core@3.6.0
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.7.1" from karma-jasmine-html-reporter@1.6.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Jeroen\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jeroen\AppData\Local\npm-cache\_logs\2021-05-25T12_22_51_638Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.12
Node: 16.1.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1102.12 (cli-only)
@angular-devkit/core         11.2.12 (cli-only)
@angular-devkit/schematics   11.2.12 (cli-only)
@schematics/angular          11.2.12 (cli-only)
@schematics/update           0.1102.12 (cli-only)

Anything else relevant?
npm: 7.11.2

Workaround:

Run ng new angular-tour-of-heroes with all default values.
Let the command error
Run cd angular-tour-of-heroes
Run npm i --legacy-peer-deps

Please update to the latest patch release for v11 (currently 11.2.13). Alternatively, v12 is also available.

If you are still encountering this issue after updating, please let us know.

authors: Ionaru clydin


text:
Can't use Foundation SCSS

OS?

macOS Sierra

Versions.
angular-cli: 1.0.0-beta.21
node: 7.1.0
os: darwin x64

Repro steps.

Create an app using ng new scssy-project --style=scss
Install foundation + foundation-sites
Try requiring /node_modules/foundation-sites/scss/settings/settings in styles.scss for example

The log given by the failure.
@import 'util/util';
^
      File to import not found or unreadable: util/util

Mention any other details that might be useful.
Related foundation issue is https://github.com/zurb/foundation-sites/issues/7744
Solution is to add foundation-sites/scss to sass import paths.
Impossible to do because of https://github.com/angular/angular-cli/issues/1656

This is already tracked in #2747

Indeed, thanks for your time


text:
Build error with Prod and AOT

Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.1.0
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1
Repro steps.

ng new app1
cd app1
ng build --prod --aot
The log given by the failure.

PS C:\Development\app1> ng build --prod --aot
Hash: 0e1b8623fcaacef6ccdc
Time: 7548ms
chunk    {0} polyfills.9ade66817b93b06337d0.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.40656b4d180dfa8e30fa.bundle.js (main) 679 bytes {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.b0becb145c965d8dc808.bundle.js (vendor) 849 kB [initial] [rendered]
chunk    {4} inline.2f6680c481526349cbc6.bundle.js (inline) 0 bytes [entry] [rendered]
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Development\app1\src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
Desired functionality.

aot should built without any errors
Mention any other details that might be useful.

ng build Run successfully
ng build --prod Got same above error

same issue
@angular/cli 1.2.4

Check solutions from here #7113

Workaround npm install enhanced-resolve@3.3.0 --save-dev has solved my issue.
Is this right thing to do?

@ashfaqch - you have 2 choices for a fix:

Do what you show - pinning enhanced-resolve to version 3.3.0
Upgrade to @angular/cli version 1.2.6 which fixes the issue with the newer enhanced-resolve.

@ashfaqch
as @daddyman daddyman just said, I upgraded the @angular/cli version to latest, in Updating Angular CLI  and reproduced the steps and work perfectly.
Probably, this issue should be changed to closed

@daddyman @ampgular
Thank you for your respond! I think i am going to upgrade angular/cli to 1.2.6 which seems to be right things to do.

authors: ampgular ashfaqch daddyman djhojd harryhahn


text:
Error in ng generate component

Bug Report or Feature Request (mark with an x)
- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 6.11.5
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

ng generate component foo

The log given by the failure.

ERROR in src/app/foo/foo.component.ts(7,18): error TS2304: Cannot find name 'ViewEncapsulation'.
Desired functionality.

The generated component refers to ViewEncapsulation without importing it.  Either it should be imported, or it should not appear at all. Right now it is:
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FooComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

So the line:
encapsulation: ViewEncapsulation.None

should probably go, or the import at the start should be:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';

BTW, why should it be ViewEncapsulation.None?
Mention any other details that might be useful.

Related 8374

I think the bug is that viewEncapsulation is set at all.

#8374

This is a bug, the generated code does not even have a correct import.
Also encapsulation: ViewEncapsulation.None should be by no way the default.

fixed via https://github.com/angular/devkit/commit/a8a6559649c8815b2b24561bd6ef00e4e4ad4ab8

angular/devkit@a8a6559 takes care of importing ViewEncapsulation when necessary.
The issue of using ViewEncapsulation.None by default still remains.
Some background:
I believe using None as the default value for ViewEncapsulation was an issue since the beginning, but was cancelled out in most cases by another bug (which was fixed in angular/devkit@6d7a7ea57, revealing the original issue).
AFAICT, the default value needs to be changed from None to Emulated in the following files:

schematics/angular/application/schema.json
schematics/angular/component/schema.json

@gkalpak  I completely agree to this!
This was done by purpose:  https://github.com/angular/devkit/blob/6d7a7ea5709c31d839d98ecad4bb174c34a476e9/packages/schematics/angular/component/index_spec.ts#L65
But I'm confused why we want to have this breaking change?
Nobody would expect None as the default. Since it's not the default Angular-behavior. This should be fixed very soon, or a lot of people will have a hard time to realize this fundamental change.
@Brocco can you explain this to us? I'm confused!

This issue has been reported several times and is currently being tracked via #8398 closing this issue.
Duplicate of #8398

Woops, my bad, LOL... reopening. 😀

Error while generating component. Please help me
The "c" alias is already in use by the "--collection" option and cannot be used by the "--change-detection" option. Please use a different alias.
ng -v
Your global Angular CLI version (7.1.4) is greater than your local
version (1.7.4). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
_                      _                 ____ _     ___

/ \   _ __   __ _ _   | | __ _ _ __     / | |   | |
/ △ \ | ' \ / _ | | | | |/ _ | '|   | |   | |    | |
/ ___ | | | | (| | || | | (| | |      | || | | |
//   __| ||_, |_,||_,||       _|||
|___/
Angular CLI: 1.7.4
Node: 10.15.3
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
@angular/cli: 1.7.4
@angular-devkit/architect: 0.13.7
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 7.3.7
@angular-devkit/schematics: 7.3.7
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 7.3.7
@schematics/package-update: 0.3.2
@schematics/update: 0.13.7
typescript: 2.5.3
webpack: 3.11.0

authors: Brocco FreakDroid JohannesHoppe deebloo dhananjayve gkalpak louridas yaroslavert


text:
ng eject creates absolute paths for "alias" in webpack config

Bug Report or Feature Request (mark with an x)
- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0 (e)
Node: 8.9.1
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack-concat-plugin: 1.4.0
webpack-dev-middleware: 1.12.0
webpack-dev-server: 2.9.4
webpack-hot-middleware: 2.20.0
webpack: 3.8.1

Repro steps.

$ ng eject # on mac
The log given by the failure.

Desired functionality.

aliases relative or remove them
Mention any other details that might be useful.

Example webpack config output:
"alias": {
      "rxjs/AsyncSubject": "/Users/me/Projects/my/project/node_modules/rxjs/_esm5/AsyncSubject.js",

I think it's fixed in angular cli 1.6:
I observed the problem in 1.5 in a vanilla ng new & ng eject.
I cant observe the problem in 1.6 in a vanilla ng new & ng eject.

Can confirm this. If you need to change an old webpack file just replace your alias with
 const rxPaths = require('rxjs/_esm5/path-mapping'); ... "alias": rxPaths()
Thats how the new angular cli does it

Fixed in 1.5.4/1.6.0.

authors: StefanKern clydin jbandi mwager


text:
Some packages fail to compile on 1.6.1: Fabric, socket.io-client

Versions
Angular CLI: 1.6.1
Node: 8.9.0
OS: darwin x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.6.2
webpack-bundle-analyzer: 2.9.1
webpack-node-externals: 1.6.0
webpack: 3.10.0

MacOS High Sierra

Repro steps
install package fabric  or socket.io-client
import into module
ng build
Observed behavior
This is from socket.io
ERROR in ./node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/lib'
resolve 'child_process' in '/Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/lib'
  Parsed request is a module
  using description file: /Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/package.json (relative path: ./lib)
    resolve as module
      /Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/lib/node_modules doesn't exist or is not a directory
      /Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/node_modules doesn't exist or is not a directory
      /Users/tallyb/Documents/project/project-ng/node_modules/node_modules doesn't exist or is not a directory
      /Users/tallyb/Documents/project/node_modules doesn't exist or is not a directory
      /Users/tallyb/Documents/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/tallyb/Documents/project/project-ng/node_modules
        using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules)
          using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process.js doesn't exist
            as directory
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process doesn't exist
      looking for modules in /Users/tallyb/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/tallyb/node_modules/child_process doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /Users/tallyb/node_modules/child_process.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/tallyb/node_modules/child_process.js doesn't exist
        as directory
          /Users/tallyb/node_modules/child_process doesn't exist
      looking for modules in /Users/tallyb/Documents/project/project-ng/node_modules
        using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules)
          using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process.js doesn't exist
            as directory
              /Users/tallyb/Documents/project/project-ng/node_modules/child_process doesn't exist
      looking for modules in /Users/tallyb/Documents/project/project-ng
        using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: .)
          using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process.js doesn't exist
            as directory
              /Users/tallyb/Documents/project/project-ng/child_process doesn't exist
      looking for modules in /Users/tallyb/Documents/project/project-ng
        using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: .)
          using description file: /Users/tallyb/Documents/project/project-ng/package.json (relative path: ./child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/tallyb/Documents/project/project-ng/child_process.js doesn't exist
            as directory
              /Users/tallyb/Documents/project/project-ng/child_process doesn't exist
[/Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/lib/node_modules]
[/Users/tallyb/Documents/project/project-ng/node_modules/xmlhttprequest-ssl/node_modules]
[/Users/tallyb/Documents/project/project-ng/node_modules/node_modules]
[/Users/tallyb/Documents/project/node_modules]
[/Users/tallyb/Documents/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/tallyb/node_modules/package.json]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process.ts]
[/Users/tallyb/node_modules/child_process/package.json]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process.js]
[/Users/tallyb/node_modules/child_process]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process]
[/Users/tallyb/node_modules/child_process.ts]
[/Users/tallyb/node_modules/child_process.js]
[/Users/tallyb/node_modules/child_process]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process.ts]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process.js]
[/Users/tallyb/Documents/project/project-ng/node_modules/child_process]
[/Users/tallyb/Documents/project/project-ng/child_process]
[/Users/tallyb/Documents/project/project-ng/child_process.ts]
[/Users/tallyb/Documents/project/project-ng/child_process.js]
[/Users/tallyb/Documents/project/project-ng/child_process]
[/Users/tallyb/Documents/project/project-ng/child_process]
[/Users/tallyb/Documents/project/project-ng/child_process.ts]
[/Users/tallyb/Documents/project/project-ng/child_process.js]
[/Users/tallyb/Documents/project/project-ng/child_process]
 @ ./node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js 16:12-36
 @ ./node_modules/engine.io-client/lib/transports/index.js
 @ ./node_modules/engine.io-client/lib/socket.js
 @ ./node_modules/engine.io-client/lib/index.js
 @ ./node_modules/socket.io-client/lib/manager.js
 @ ./node_modules/socket.io-client/lib/index.js
 @ ./packages/@yoodeeplearning/data/dist/services/feathers/feathers.service.js
 @ ./packages/@yoodeeplearning/data/dist/services/index.js
 @ ./packages/@yoodeeplearning/data/dist/data.js
 @ ./packages/@yoodeeplearning/common/dist/common.ionic.module.js
 @ ./packages/@yoodeeplearning/common/dist/common.ionic.js
 @ ./packages/@yoodeeplearning/mobile/src/app/app.module.ts
 @ ./packages/@yoodeeplearning/mobile/src/app/main.ts
 @ multi ./packages/@yoodeeplearning/mobile/src/app/main.ts

Desired behavior
it would be great if it builds. It works ok with 1.6.0! Only occurred on 1.6.1
Mention any other details that might be useful (optional)
Project is lerna based with a common angular-cli.json for multiple targets.

This was being cause on our end by an overly greedy paths specification in our tsconfig. We had been using the following to make our monorepo work:
    "paths": {
        "*": ["packages/*", "node_modules/*"]
    }

After 1.6.1, the PathsPlugin also started intercepting requests from .js files which caused both fabric.js and engine.io-client to match the pattern (since everything matches "*"), and their package.json browser fields never got read. This resulted in both jsdom and xmlhttprequest-ssl being included in the bundle which broke the build.
The solution was to move to a more selective tsconfig paths setting for our angular/cli packages, (although this failed for the lib packages we are compiling with ngc, so we are now using two different tsconfigs for our different packages depending on the build tool).

After experimenting a bit, it seems this issue may be the exact same as #7540, see my comment on that issue.

@jskrzypek I tagged that issue for attention and will be closing this one. If they turn out to be different we can reopen this.

authors: Tallyb filipesilva jskrzypek


text:
Change npm install to yarn to install dependencies

On cloning angular-cli and running npm install
I got the error message :
 npm install                                                                                angular-cli/git/master

> @angular/devkit-repo@0.0.0 preinstall /home/rohit/Projects/angular-cli
> node ./tools/yarn/check-yarn.js

/home/rohit/Projects/angular-cli/tools/yarn/check-yarn.js:12
  throw new Error(
  ^

Error: Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/
    at Object.<anonymous> (/home/rohit/Projects/angular-cli/tools/yarn/check-yarn.js:12:9)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:279:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @angular/devkit-repo@0.0.0 preinstall: `node ./tools/yarn/check-yarn.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular/devkit-repo@0.0.0 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/rohit/.npm/_logs/2018-10-05T18_18_04_521Z-debug.log

The solution was to instead run yarn.

@alan-agius4 Commit message changed as requested.


text:
ci: run snapshot job when snapshot package.json is modified

Prior of switching to the self hosted Renovate bot, we ran e2e-cli-ng-snapshots job on the main branch and Renovate PRs that updated the Angular dependencies. Since the switch however we only run this on the main branch because the previous branch filter renovate/angular doesn't match.
Unfortunately, we can no longer rely on the branch filter as for forked repos circle passes the branch names in the form of pull/<number>.
Thus, we use orbs path-filtering together with circle ci dynamic configuration feature.
See: https://circleci.com/developer/orbs/orb/circleci/path-filtering

Main changes in the old config
https://github.com/angular/angular-cli/pull/23563/files?diff=split&w=1#diff-54754731a66c2655315cafe53d01ecb11f15d0360b0b30279b201128ed868862R385-R390
https://github.com/angular/angular-cli/pull/23563/files?diff=split&w=1#diff-54754731a66c2655315cafe53d01ecb11f15d0360b0b30279b201128ed868862R15-R18

Closing in favor of https://github.com/angular/angular-cli/pull/23567

Until we decide on https://github.com/angular/angular-cli/pull/23567 I am re-opening this :)


text:
use angular material, material design lite or materialize.css for styles

i suggest replacing the css framework with either:

https://material.angularjs.org/latest/
https://getmdl.io/
http://materializecss.com/
they are all based on material design and we are 2017, we progress. we want to provide the new and old angular developers with a delightful experience and the newest technologies, right? apart from that these are all google technologies and synergies are created which is beneficial to mutual growth. all things aside the quality of the material design css stands out.

This is not a good idea imho for the following reason:
This is not a generic "web-development with AngularJS" tutorial. It is specifically focused on AngularJS. Thus, it should contain the minimum non-AngularJS concepts/tools necessary to teach people how to start using AngularJS.

There are probably two kinds of people that the tutorial targets:

People that are beginners in web-dev in general.
People that might be experienced in web-dev and trying to learn AngularJS.

The second group of people would be familiar with CSS frameworks and would be able to apply them on top of AngularJS. So, while using a CSS framework would not make the tutorial more difficult for them to follow, omitting wouldn't hurt them either.
The first group of people, having to learn a CSS framework along with AngularJS (and web-dev in general) and having to read through more bloated templates etc, would have a much harder time imo.
Just m2c.

What would be interesting, is maybe having an AngularJS Material tutorial (if there is not one already) that assumes you know the basics of AngularJS and starts from there.

This issue is being rejected on the basis of severe violation of our Code of Conduct by the contributor.
More detailed explanation was emailed to the contributor.

authors: NilsHolger gkalpak mary-poppins

repo: angular/angular-phonecat


text:
Error ng-invalid-date -      (Solutions in badInputChecker() )

I have a input type = "Date" not required in my form linked to a
ng - model = "date" , when I add a value to the component
and then use the delete key to erase the value , the angular adds
the ng -invalid class component and adds to the value undefined , making my form
invalid.
The solution is the function which adds badInputChecker undefined
for the component , the solution would be to add null !
Thus, the only component will be invalid if requirido .
function badInputChecker(scope, element, attr, ctrl) {
var node = element[0];
var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);
if (nativeValidation) {
ctrl.$parsers.push(function(value) {
var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
// Detect bug in FF35 for input[email] (https://bugzilla.mozilla.org/show_bug.cgi?id=1064430):
// - also sets validity.badInput (should only be validity.typeMismatch).
// - see http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state-(type=email)
// - can ignore this case as we can still read out the erroneous email...
//return validity.badInput && !validity.typeMismatch ? undefined: value;    old
return validity.badInput && !validity.typeMismatch ? null : value;
});
}
}
Best regards

I think this is a duplicate of #12207.
If that is indeed the case, you can take a look at https://github.com/angular/angular.js/issues/12207#issuecomment-140012824 for temporary work-around (until this is properly resolved).
If not, please, provide a live reproduction (e.g. using CodePen, Plnkr etc) so we can indentify the issue (and hopefully fix it :smiley:).

It is not the same problem.
When you clear the input value using only the keyboard (backspace or delete keys) the form should return to valid if the input is not required, this actualy happens when you click the "X" button within the input.
Have this plnker.
It is actually a fork from the one you linked.
1 - Choose a Full Date.
2 - Check if myForm.$valid = true
3 - Use the "X" to clear the value
4 - Check if myForm.$valid = true
It is working as expected, now the problem:
1 - Choose a Full Date.
2 - Check if myForm.$valid = true
3 - Remove the year using keyboard (del or backspace)
4 - Check if myForm.$valid = false
5 - Remove the month using keyboard (del or backspace)
6 - Check if myForm.$valid = false
7 - Remove the day using keyboard (del or backspace)
8 - Check if myForm.$valid = true
It is not working as expected, it should return to $valid.

Actually, it is the same. The problem does not lie in badInputChecker, but the fact that no input event is fired after when deleting parts (year, month, day) of an already invalid value.
For a more detailed explanation and a temporary work-around, read the discussion in #12207.
(Here is the demo of the work-around for easier reference.)
--
Closing as duplicate of #12207.

Hi @gkalpak
I found another problem in Chrome.
1.Key in Month or Date or Year.Dot not use choose.
2.Use the "X" to clear the value -->Now $valid=true -->expect
3.Key in Month or Date or Year again.
4.Use the "X" to clear the value -->Now $valid=false -->error

@kimx, seems like a valid issue. Can you please open a new issue ?

Interesting facts:

When the mousedown event fires (when clicking on the "X"), it sets up a 0-delay timeout to check if the validity of the input has changed. We expect that by the time the timeout is triggered, the input will have changed (i.e. will have been cleared in this case) and the validity will have been restored. It doesn't.
By trial-and-error, I found out that a delay of 150ms is sufficient for the change to be picked up, but this threshold will probably defer based on browser/OS/device.
The first time you click the "X", an input event is also triggered, thus we are able to detect the change properly. This is why your step (2) above works. For whatever reason, the input event is only triggered the first time :unamused:

So…Do you have any suggestions?

@kimx: I have a few. For whom?
For users: As a workaround, you can trigger an input event after a short timeout on mousedown (demo).
For Chrome: Always trigger an input event, whe then user clicks "X".
For us: Not sure. Listening for mouseup (instead of or in addition to mousedown). Adding a small delay (150-200ms). TBH, I don't remember what mousedown event we expect to change the input. IS it only clicking the "X" or are there other usecases that we need to take into account?
For you: Open a new issue, so we can track this. (I know I could do it myself, but it's your finding - I don't want to steal your thunder :stuck_out_tongue: )
/cc @jbedard

@gkalpak
Thanks for help. I've opened a new issue.
https://github.com/angular/angular.js/issues/14740
I think that I can used your suggestion (For users) to solve this odd problem temporary for this time.

authors: gkalpak kimx mxnho


text:
Add ng-empty-value attribute to ngOptions directive

See https://github.com/angular/angular.js/issues/1780#issuecomment-157344476

I think that this is not needed in core, as it can be simply and robustly implemented as a 3rd party module - see https://github.com/angular/angular.js/issues/1780#issuecomment-294939793 for more info. @gkalpak also agrees that this is not 100% necessary: https://github.com/angular/angular.js/pull/13471#issuecomment-287732365

authors: Narretz petebacondarwin


text:
Issue with replace: true & libraries built on top of third party CSS

I have a bit of a long term quandary here - I know that replace: true is deprecated, but removing this is a bit of a problematic situation with UI Bootstrap. The library is built on top of Bootstrap's CSS, which enforces a certain HTML structure. The problem with removing replace usage is that this creates an intermediary element, whether the element itself the directive is used on, or an element with the name of the directive if it is used as an element. This is a major issue for any library built on top of third party CSS like UI Bootstrap, and (I am guessing) angular-foundation.
In addition, it prevents users from using certain built in directives with some elements such as ng-class.
Is there any guidance on how we could work around this in UI Bootstrap while removing replace: true usage as recommended? It should be noted that we likely cannot work around HTML structure too much since this would cause a massive pain for those using Bootstrap themes with UI Bootstrap.

Long term is the right word. Because for 1.x, you don't really have to remove replace, unless it causes bugs. It will only be removed in Angular 2. But then you have a problem.
I think this is something that should be handled by the CSS libraries. They should make their CSS less coupled. I had this problem myself ... bootstrap requires a sibling element for the dropdown. I don't know who you can build something like this.

Thanks for the response Narretz. We wanted to remove replace from uibs but as Wesley said, that will disallow people to theme their app.
I have my own project with a replace bug but in this case it is feasible to rewrite the entire CSS to my needs. Wouldn't be a good idea to do the same with bootstrap :P

Closing, as we actually have it mostly figured out with Bootstrap.

authors: Foxandxss Narretz wesleycho


text:
CSP issue caused by new Function('')

AngularJS is in LTS mode
We are no longer accepting changes that are not critical bug fixes into this project.
See https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c for more detail.

I'm submitting a ...

[ ] regression from 1.7.0
[X] security issue
[ ] issue caused by a new browser version
[ ] other

Current behavior:  I got csp-report: {"blocked-uri": "eval"} pointing on 2 lines of Code from angular.js

function noUnsafeEval() {
try {
// eslint-disable-next-line no-new, no-new-func
new Function('');
return false;
} catch (e) {
return true;
}
}

// eslint-disable-next-line no-new-func
var fn = (new Function('$filter',
'getStringValue',
'ifDefined',
'plus',
fnString))(
this.$filter,
getStringValue,
ifDefined,
plusFn);

Expected / new behavior: Not having "new Function('')" in the code and so not having csp-reports

Minimal reproduction of the problem with instructions:

AngularJS version: 1.7.8

**Browser: All

Anything else:

See https://docs.angularjs.org/api/ng/directive/ngCsp.

authors: AymenMou gkalpak


text:
Issues with $id, $http and Web API

I have recently upgraded our product from Angular 1.2.x to 1.3 and all was going well until I found an issue regarding $id.
The issue arises in the following scenario:
Please Note: This scenario uses an Opportunity object which contains a list of sites. Initially there is 1 site in the list and I need to create a new site.
Step 1: Use $http to get an Opportunity from Web API (Opportunity has 1 site).
As soon as this is returned from the $http request I can inspect the object and it has the following json:
{
"$id":"1",
"CustomerId":"01663f1b-9cd4-4546-b27e-03b0e88065bb",
"CustomerName":"Agco Ltd",
"OpportunityType":"Opportunity",
"FullTitle":"OP22441: Angular 1.3 Test (Agco Ltd)",
"Sites":[
{
"$id":"2",
"OpportunityId":"d002e446-8252-480c-8163-6072967481a8",
"Number":1,
"Name":"Trigger",
"Town":"Cheltenham",
"Id":"262962b3-0962-4757-bf5d-be76853e18f6",
"IsNew":false,
"Key":"3485cb1b-996c-408d-a72b-06371f658e61"
}
],
"Id":"d002e446-8252-480c-8163-6072967481a8",
"IsNew":false,
"Key":"415d8cf8-f2f6-48b1-aa1a-201fe6ff1e5c"
}
As you can see, the Opportunity has a $id property set to 1 and the first site has a $id property set to $2.
Step 2: Call Web API via $http to Initialize and return a new Site object. This returns the following json:
{
"$id":"1",
"OpportunityId":"d002e446-8252-480c-8163-6072967481a8",
"Number":2,
"Name":"Site 2",
"Town":null,
"Id":"00000000-0000-0000-0000-000000000000",
"IsNew":true,
"Key":"a74494a4-a6be-4e3d-895f-c0a8efe60f54"
}
As you can see, the Site has a $id property set to 1 This object is then added to the list of Sites against the opportunity $scope.model.opportunity.Sites.push(newSite)
Then, when I come to click save, I call through to Web API using $http, I can evaluate the json, and it contains the expected data (an opportunity with 2 sites), however when I put a breakpoint in the corresponding method on the Web API the object comes through with only 1 site!!!
The only way I have managed to get the data through to Web API correctly is to either:
a) Remove the $id property from the objects before save
delete opportunity.$id;
delete opportunity.sites[0].$id;
delete opportunity.sites[1].$id
b) Change the $id value on the 2nd site to a unique value e.g.  opportunity.sites[1].$id = 4
As you can appreciate, either way, this is not a valid fix. Any help would be gratefully received

Hello,
I am facing the same issue.
In web api configuration I am using following code...
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;
Any Suggestion?

authors: ashutoshparmarQT craigbroadman


text:
New router doesn't work

When I try to click on any link in the repo list on the Github Repos page I get this error:
EXCEPTION: Error: Uncaught (in promise): Component 'RepoList' does not have route configuration

We are not on the latest router yet. It will change in #75

authors: pkozlowski-opensource vagarenko


text:
TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Hello I'm using firebase to authenticate with google following the documentation and I skip that error that I mention in the title adjuto leave the error and the package.json
==================Code=============
import {Injectable} from "@angular/core";
import { AngularFireAuth } from "angularfire2/auth";
import * as firebase from 'firebase/app'
@Injectable()
export class AuthenticationService{
constructor (public afAuth: AngularFireAuth){}
login() {
return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider);
}
}
==================End Code===========================
Error:
ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined
Package.json
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@firebase/app": "^0.1.10",
"angularfire2": "^5.0.0-rc.6.0",
"core-js": "^2.4.1",
"firebase": "^4.12.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
Regards....

@davideast Please update the documentation appropriately. You would not be faced with so many issues like this! For others who come here due to this issue: this worked for me: firebase@4.13.1, angularfire2 5.0.0-rc.6.0. In auth.service.ts:
import { User, AuthProvider } from '@firebase/auth-types'
import { AngularFireAuth } from 'angularfire2/auth'
import { firebase } from '@firebase/app'

authors: JoseCed jsdevtom


text:
not Remeber Session Angularfire2

[Sorry, my english not is very good]
I am started with angularfire2
and I used the authentication of social networks [Google, Facebook] but I not know how close automaic session, edit the propery remember
const firebaseAuthConfig = {
provider: AuthProviders.Google,
method: AuthMethods.Redirect
// remember: 'default',
}
How to disable the remember session?

Hey @JavierSaldivarRubio!
As of Firebase 3.0 the authentication is automatically refreshed and there is no option to disable remembering the session.
If you need guidance on how to make this work for your situation I recommend opening up a Stackoverflow issue. We have quite the active community there :)

Tanks davideast

authors: JavierSaldivarRubio davideast


text:
Ability to change $subscript-font-scale

Bug, feature request, or proposal:
feature request.
To be able to change the variable $subscript-font-scale: 0.75;
What is the expected behavior?
Bigger subscripted font scale in mat-field (when text is animated above the field)
What is the current behavior?
The placeholder that goes above the field when selecting field is too small
What are the steps to reproduce?
Select text field. Text animates above field.
Text is very tiny.
https://material.angular.io/components/form-field/overview
What is the use-case or motivation for changing an existing behavior?
People that doesnt have 20/20 vision are having problems reading
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
At least current version: 5.2.x
All browsers
Is there anything else we should know?

+1 that

+1

Thanks for this issue. Closing this in favor of https://github.com/angular/components/issues/17878 that talks about these variables more in general.

authors: DanieleAlessandra devversion jscti trashhead

repo: angular/components


text:
bug(Material): Checkbox has border bottom with different opacity

Reproduction
Steps to reproduce:

Change the background of a checkbox, but basically look at the source code linked below. This CSS rule should not belong there as it has side effects

Expected Behavior
Consident border color for checkboxes
Actual Behavior
Bottom border is less vivid (opacity)

Environment
"@angular/cdk": "^10.1.3",
    "@angular/common": "10.0.9",
    "@angular/compiler": "10.0.9",
    "@angular/core": "10.0.9",
    "@angular/fire": "6.0.0",
    "@angular/forms": "10.0.9",
    "@angular/material": "^10.1.3",

Issue is due to a solo "weird" css rule in https://github.com/angular/components/blob/227e568d3177886407d8c168d67a148cc6383c01/src/material/checkbox/_checkbox-theme.scss#L26
  .mat-checkbox-frame {
    border-color: mat-color($foreground, secondary-text);
  }

Why only border bottom this "change"?

Could it be an override from somewhere else in your app? I'm not seeing it against the code in master:

I will double check and let you know
On Mon, 24 Aug 2020, 21:42 Kristiyan Kostadinov, notifications@github.com
wrote:

Could it be an override from somewhere else in your app? I'm not seeing it
against the code in master:
[image: Angular_Material_-_Google_Chrome_2020-08-24_21-41-44]
https://user-images.githubusercontent.com/4450522/91088676-bbc24800-e652-11ea-9593-477400f11534.png
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/components/issues/20402#issuecomment-679327614,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJVX4ZUI5SU2NL4EUCB3OLSCK7EBANCNFSM4QJ2U5TA
.

Hi @devversion
I am adding
background-color: rgb(205, 248, 0);

to
<mat-checkbox>

The checkbox is inside a material table

Here is the first Error:
Background overlaps the border:
https://angular-gmbl1c.stackblitz.io

Then I adjust the container to become bigger:
::ng-deep  .mat-checkbox-inner-container-no-side-margin{
  width: 17px !important;
  height: 17px !important;
}

And this is then exposed:
https://angular-gmbl1c-y3hncs.stackblitz.io

So basically I cannot change the background of the checkbox inside a material table without having visual issues.
The reason is the part of code I linked on the first comment / issue
IS that enough @devversion ?
Thank you very much for looking into this

The problem isn't that the bottom border is different, but that it sticks out underneath the background which makes it look different since the rgba color causes the different to mix. I don't think we can do much about it since you're overriding our built-in styles and accommodating for all the different overrides isn't practical. For your case, maybe it can be worked around by wrapping the checkbox in a div and styling its background instead?

This is not an override of a build in style. Except if you think adding a color is an override. Then we should not color any component right?
I am just adding background on an Angular component that works but not on table rows. I am not doing anything else. The rest of the code I posted as an example was my try to fix this on my side.
@crisbeto  you have a specific RGA opacity change for the bottom border:
.mat-checkbox-frame {
    border-color: mat-color($foreground, secondary-text);
  }

https://github.com/angular/components/blob/227e568d3177886407d8c168d67a148cc6383c01/src/material/checkbox/_checkbox-theme.scss#L26
That causes this issue.
Why is that css rule there?
For reference here is just adding the background color: https://angular-gmbl1c.stackblitz.io nothing more

The CSS rule is there, because the checkbox frame has to have a border color. As I mentioned above, the color is the same on all sides, but the bottom one looks different because it's on top of a white background, instead of the red one. If you want the entire frame to be inside the red background, you can add this to your styles:
.mat-checkbox-layout {
  vertical-align: top;
}

Alright ok. This explains that. Thanks.
should we close this one ?

No problem and yeah I'll close the issue.

One question, sorry but I tried the solution with no effect. Then the top part of the border is outside....

authors: crisbeto jimmykane


text:
bug(LiveAnnouncer): LiveAnnouncer does not announce subsequent calls to the same text

Reproduction
Use StackBlitz to reproduce your issue:

Components: https://stackblitz.com/edit/angular-announcer-bug?file=src/app/app.component.html

Steps to reproduce:

Open StackBlitz link from above
Enable Narrator (on Windows press Windows key + Ctrl + Enter)
Click on "Hello world" button multiple times
Observe that Narrator announces text only on the first click

Note that if text to announce changes, the announcer works as expected. You can reproduce that by pressing on "Announce Different" button multiple times.
Expected Behavior
Narrator should announce text on each click
Actual Behavior
Narrator  announces text only on the first click if the text being announced didn't change
Environment

Angular:
CDK/Material: 11.0.3
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows

@DmitryEfimenko does this behavior happen if you clear before making the announcement (likely requiring a small setTimeout). My suspicion is that the aria-live element doesn't announce anything because it's content didn't actually change, which could be considered an expected behavior.
cc @stevenyxu since this might relate to the concept of queueing live announcer messages, which might provide a way to deal with this.

@DmitryEfimenko does this behavior happen if you clear before making the announcement (likely requiring a small setTimeout). My suspicion is that the aria-live element doesn't announce anything because it's content didn't actually change, which could be considered an expected behavior.
cc @stevenyxu since this might relate to the concept of queueing live announcer messages, which might provide a way to deal with this.

It seems that this use-case was accounted for according to the comments in the source code:
// This 100ms timeout is necessary for some browser + screen-reader combinations:
// - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
// - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
//   second time without clearing and then using a non-zero delay.
// (using JAWS 17 at time of this writing).

According to the above, the expected behavior is that repeated identical messages should be announced.
Also, looking through the code it looks like it already clears the text and sets timeout to handle exactly this use-case, but for some reason this does not work.
I'd say this is a regression.

It seems that this use-case was accounted for according to the comments in the source code:
// This 100ms timeout is necessary for some browser + screen-reader combinations:
// - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
// - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
//   second time without clearing and then using a non-zero delay.
// (using JAWS 17 at time of this writing).

According to the above, the expected behavior is that repeated identical messages should be announced.
Also, looking through the code it looks like it already clears the text and sets timeout to handle exactly this use-case, but for some reason this does not work.
I'd say this is a regression.

It's unlikely a regression because this code hasn't changed since inception. Does the behavior occur in screen-readers other than Narrator? We've never explicitly supported that one (just JAWS and NVDA on Windows), so I'm wondering if it's a reader-specific behavior.

It's unlikely a regression because this code hasn't changed since inception. Does the behavior occur in screen-readers other than Narrator? We've never explicitly supported that one (just JAWS and NVDA on Windows), so I'm wondering if it's a reader-specific behavior.

I haven't test with JAWS since it's a payed version of software. However, I installed NVDA and it looks like it works as expected with it.
I'd think the Narrator should be supported as well since it's a default screen reader that comes with Windows.

I haven't test with JAWS since it's a payed version of software. However, I installed NVDA and it looks like it works as expected with it.
I'd think the Narrator should be supported as well since it's a default screen reader that comes with Windows.

The issue also occurs with both Edge and Chrome on Mac with voiceover.

As per https://github.com/angular/components#browser-and-screen-reader-support, we don't support Windows with Narrator or Mac with Edge. I tested on Chrome with Voiceover and it seems to be working there.

authors: DmitryEfimenko amysorto jelbourn mkhanal


text:
BUG: mat-chip without mat-chip-list has no styles

Bug, feature request, or proposal:
Bug
What is the expected behavior?
<mat-chip> without parent <mat-chip-list> should render the same styles.
chip.scss is only injected to the <mat-chip-list> component.
What is the current behavior?
<mat-chip> has no styles.
What are the steps to reproduce?
add <mat-chip> to template without <mat-chip-list>
stackblitz
What is the use-case or motivation for changing an existing behavior?
i dont want to add the <mat-chip-list> if i render only one chip
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
angular: 5.2.2
material: 5.1.0
typescript: 2.6.2
os: *
browsers: *
Is there anything else we should know?

Weird thing is, when adding a mat-chip-list, it works correctly for all mat-chips.

This is happening because the mat-chip is a directive and without a view does not load styles or styleUrls.  Once mat-chip-list is loaded, the chips styling is loaded and will be applied to all things it matches via css.

Heya,
I'm pretty new to Angular and have only worked with AngularJS before. I wanted to try using the mat-chip-list component in a test project following the instructions on the official documentation but for some reason all of my chips receive the mat-basic-chip class and are thus unstyled. In addition they get extremely large for a second or so when I click them. I know it's not this exact issue but I felt it was related. Does anyone know what I'm missing...?

I have imported the module in my app.module.ts like so:
...
import { MatChipsModule } from "@angular/material/chips";
...
@NgModule({
  declarations: [...],
  imports: [
    MatChipsModule,
    ...
  ]
})
export class AppModule { }

...and my layout inside the app.component.html looks something like this:

  ...

    <mat-card fxFlex fxFlexFill>
      ...
      <mat-card-content>
        <mat-chip-list>
          <mat-chip>My</mat-chip>
          <mat-chip>Awesome</mat-chip>
          <mat-chip>Chips</mat-chip>
        </mat-chip-list>
      </mat-card-content>
    </mat-card>

Something new about that? Still not working. Thank you
Angular v6.0.0
Material v6.2.1
TypeScript v2.7.2

Agreed that it would be nice to have chips without a chip-list, but currently this would be a low priority issue.

Thank you for your reply.
Btw. I tried it with <mat-chip-list> and styles are missing too (I mean, styles for primary/accent/warn color), it is something changed? See example here:
https://stackblitz.com/edit/angular-9vs2ga
Thank you.

@striky1 The colors only appear when the selected property is set on the map-chip.

@frederikschubert oh, u are right! Thank you so much ;)

Just if someone's wondering the same issue -  even wrapping up <mat-chip> by <mat-chip-list> still won't apply theme styling e.g. typography.
It turns out that you will need to again wrap the whole thing up by something else like <mat-card-content>.
If you don't want to use chips within a card, you can wrap it up by <mat-form-field>. But then there's an unwanted underline under the chips. You can eliminate it by doing:
mat-form-field.mat-form-field .mat-form-field-underline {
    display: none;
}

For applying colors to chips like primary/accent/warn, as @frederikschubert mentioned, the selected property does the work.

I have just encountered this "bug"/"design flaw". I was about to write an issue:

Here is a STACKBLITZ
In stackblitz look at the solution in the comment. Just place a

Workaround:

place a <mat-chip-list></mat-chip-list> somewhere in your template. Then you can use mat-chips as stand-alones.

Just spent a few hours today chasing this issue down. This should move up a bit in priority, this is poor design.
@andreElrico Thanks, had to place a random mat-chip-list in a template for everything to work.

I have just encountered this "bug"/"design flaw". I was about to write an issue:

Here is a STACKBLITZ
In stackblitz look at the solution in the comment.

Workaround:

place an empty <mat-chip-list></mat-chip-list> somewhere in your template. Then you can use mat-chips as stand-alones.

Thanks m8... did this too...
They really dropped the ball on this one

any plan to fix it in future release?

You can always apply typography with class="mat-typography"

I've created a gist to show my fix that may be an inspiration for people who wants more chip features: https://gist.github.com/MithrilMan/46de5430df3f5945f68e3e1e64d46a18
My need was to have a kind of bootstrap badge implementation (so a chip that just surround text with the same aspect of chip, without ripple)
I'll post code here too... I started recently using angular so I don't know if what I did may contains some DON'T, so in case let me know, here the code:
import { Component, OnInit, Input, AfterViewInit, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
    selector: 'chip',
    template: `
<ng-template #fixTemplate>

   <mat-chip-list style="display:none" id="chip-fix"></mat-chip-list>
</ng-template>
<ng-container #fixContainer></ng-container>
<ng-content></ng-content>
`,
    host: {
        class: 'mat-chip mat-chip-selected mat-standard-chip ',
        '[class.mat-accent]': 'color=="accent"',
        '[class.mat-primary]': 'color=="primary"',
        '[class.mat-warn]': 'color=="warn"'
    }
})
export class ChipComponent implements OnInit, AfterViewInit {
    @Input() color: string;

    @ViewChild('fixContainer', { read: ViewContainerRef, static: true })
    chipFix: ViewContainerRef;

    @ViewChild('fixTemplate', { read: TemplateRef, static: true })
    fixTemplate: TemplateRef<null>;

    constructor() { }

    ngOnInit() {
    }

    ngAfterViewInit(): void {
        if (!document.getElementById("chip-fix")) {
            this.chipFix.createEmbeddedView(this.fixTemplate);
        }
    }
}

(basically I borrowed some material classes, but to have them all we need the mat-chip-list so I inject one if the page doesn't have it)
gist  https://gist.github.com/MithrilMan/46de5430df3f5945f68e3e1e64d46a18

2 years passed and still no fix! This is really weird, it needs some attention.

I still can't believe this issue is open after 2 years

Having the same issue, any update?

this needs to be resolved ASAP

this needs to be resolved ASAP

Hey
any update on this issue?!

Facing the same issue, adding <mat-chip-list></mat-chip-list> in template fixed it however it's a real time waste for a lot of people who encounter this problem for the first time. If it's not gonna be fixed then I will suggest it will be better to at least add an error message about <mat-chip-list> being a required parent for mat-chip

Is this still a thing after all these years omg 🗡

Will be fixed by https://github.com/angular/components/pull/23931.

26 may 2022 and still not fixed

2022-07-22 and still not fixed

2023-10-11 and still not fixed
The irony of myself not fixing open source code is not lost on me.

As far as I can tell this is fixed. See https://stackblitz.com/edit/oekksb?file=src%2Fexample%2Fchips-overview-example.html. The issue can be reopened if there's a repro.

authors: AJHanekom Dzivo Frankkwizera JorgeMCSilva Manostion MithrilMan abbasharoon alex-polosky am-awais andreElrico baci5190 crisbeto donroyco fbalbinoribeiro frederikschubert jelbourn josephperrott lorenzocovarrubiasjr ninjaonsafari pavankjadda rivernews shadyabouelmakarem striky1 youssefkri yuchaosydney


text:
mat-selection-list not selecting the items

Hi Mat-Selection-List not selecting the items, i am binding json array to selection and options.
Bug
mat-list-option show as selected
mat-selection-list not selecting the items
Issue on stackblitz
I am using Angular 5, VSCode 1.20.1 and chrome version  65.0.3325.181

Please change your issue so that it does follow the issue template. It gives the team the information needed to investigate.

Hi Donroyco i have updated the post

Closing as this is working as expected.  MatSelectionList does not implement NgControl to make ngModel work as you have attempted here.
You will need to use the SelectionModel that is available on the MatSelectionList to set the initial selected values of the list.

Hi SelectionModel doesn't work
<mat-selection-list #list  (SelectionModel)="sar" (ngModelChange)="onNgModelChange($event)">

authors: donroyco josephperrott sivahanuman


text:
show available prebuilt themes in docs

Bug, feature request, or proposal:
feature request documentation
What is the expected behavior?
In the docs users should see a list of available prebuilt themes and a link to a sample page of each theme.
What is the current behavior?
No information of what themes are available and how they look like.
What are the steps to reproduce?
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
What is the use-case or motivation for changing an existing behavior?
I like to use this great library but the documentation could be improved to make the start easier.
Which versions of Angular, Material, OS, browsers are affected?
Is there anything else we should know?

@jelbourn
Issue question:
Where should these examples be created?
/src/lib/examples/theme-NameofTheme-overview ?
Just one and then reference the other defaults, or all 4 themes?
Extra question:
Also are there going to be more default themes? / a theme builder ?

We should list all of the prebuilt themes in the theming guide.
We will add more prebuilt themes before final.
We do want to add a theme builder to the docs site eventually, but that's more of a nice-to-have.

@M-a-c Are you looking into this?

Yeah I was going to tackle it Monday if thats ok. I don't have a pr for it right now.
I think this Add theming to docs should be re-added, for when there are more themes, before going gold.

Sounds good! Thanks.

Is sample link to each theme necessary ?
If its possible can someone open a P4 on the 'theme builder' and describe how it would work? I would love to work on something like that.

I think for now we only want to list all prebuilt theme paths in the theming guide.
We could do that with a Dgeni processor or just with gulp transform.

Reading up on Dgeni now, sorry for the confusion. I had no idea this existed. I was wondering how exactly this sorta magic happened. I'll dig for an example to figure this out.

I'm not sure this is something that needs to be done with tooling; the prebuilt themes will change infrequently enough that i'm okay with just manually listing them in the guide.

@jelbourn is it ok If I submit a pr for a static one, and open a less 'important task' for a tooled one later? I would like to try my hand at that, it might be useful to learn, and its one less thing to worry about later. Plus I would love to feel more comfortable with whats going on with the project so I can make larger contributions.

@DevVersion @jelbourn I'm a bit confused with who to follow, I'm pretty sure I'm more than half way done tooling a solution. Is it ok if I continue on that?

Please do what @jelbourn proposed.
I initially thought that a dynamic solution would be appropriated but since we don't have frequent changes with the prebuilt-themes I can see Jeremy's point.

@DevVersion Thanks for the clarification.

@DevVersion can you pr my pull request #3826 its small 🌮

@jelbourn This issue can be closed too 😃
Also is there a way that I can create a pr such that a merge closes the issue?

@M-a-c if your PR says "Fixes #3550" in the description it will close the issue automatically when merged.

authors: DevVersion M-a-c jelbourn lestard


text:
MdButton focus rendering

Bug, feature request, or proposal:
Bug
What is the expected behavior?
When button is programatically focused it should render as if it has focus.
What is the current behavior?
It seems to have focus set, if I hit the tab key it moves to the next control, but it does not render as if it has focus.
What are the steps to reproduce?
Plunker: http://plnkr.co/edit/HhD8eF?p=preview
What is the use-case or motivation for changing an existing behavior?
I would like to set a button in a view as the focused element so that the user does not have to select the button using the mouse or keyboard.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Latest Angular, Material 2, TypeScript 2.4.2, on a Windows OS computer in Chrome, FireFox, and Edge
Is there anything else we should know?
Nope

This should be resolved by https://github.com/angular/material2/pull/5966.

This will be resolved by #5966.

authors: anwalkers crisbeto


text:
Allow menu-trigger to take a menu interface.

This should enable menus to be more easily extended for custom menu implementations.
Addresses #1560.

I went back and forth on whether or not to make it an abstract class with many of the implementation details on the abstract class. I went with the interface because it's less invasive to the consumer than an abstract class.

Force pushed to address the conflict in merge of #1534.

Hey @jelbourn, I have made the requested updates. Good suggestions. The test really helps demonstrate the creation of custom menus.

LGTM aside from a couple last comments. @kara should also take a look

Hey @kara, thanks for the review. I have removed the underscore from the interface, rebased, squashed my commits, and updated the commit message style.

authors: jelbourn trshafer


text:
fix(menu): wrong animation in Angular 4.2+

Fixes the new menu animation glitching out against Angular 4.2. It seems like transitioning from scale(0, 0) to scale(1, 0.5) doesn't work correctly at the moment. This is a workaround that will transition it from scale(0.01, 0.01) instead.
For reference:

Note: Screenshot tests need to be fixed

authors: crisbeto kara


text:
getOuterHtml() has been deprecated, and that issue was fixed in this repo, but the change was not published to NPM.

I'm running some protractor e2e tests, and I'm getting errors like:
[16:43:19] E/plugins -          TypeError: elem.getOuterHtml is not a function
This is caused because the module still uses thee deprecated getOuterHtml() method.
This issue was fixed in this repo, getOuterHtml was removed and replaced correctly by getAttribute("outerHTML"), but this change was not published. The latest version is 0.3.0, dated 2 years ago.
https://github.com/angular/protractor-accessibility-plugin/blob/d0cca1876d6e829d882b6b885e9b7e80318f68d5/index.js#L181
It would be from great help if you publish the latest code. Thanks a lot in advance.

I am experiencing the same error. Any update on this issue?
E/plugins - 		Failure during teardown: elem.getOuterHtml is not a function
E/plugins - 		TypeError: elem.getOuterHtml is not a function

    "protractor": "^5.4.2",
    "protractor-accessibility-plugin": "^0.3.0",

authors: guillermosnipe trinajoy

repo: angular/protractor-accessibility-plugin


text:
Style guide is incorrect regarding to the page objects

As per my question, the style guide needs to be updated. The answer of @alecxe solves the problem.

@andresdominguez FYI.

I do not think there is anything wrong with the style guide as it is. In the style guide we recommend declaring element finders and functions. An ElementFinder will not execute until you call a function on it, like getText(), isPresent(), etc.
When you mention "initialize some fields", what are you actually doing? Please update your question with the code that is causing a problem.

@andresdominguez I suspect the OP is trying to do something with the found elements right inside the constructor. That would explain why my advice to move the page object initializations to beforeEach() helped. Let's wait for the code. Thanks for looking into this.

@sjelin can you close this one as "Intended behavior"?

Here's the code, as requested:
var LoginPage = function() {
  this.form = browser.driver.findElement(by.name('ldap_login_form'));
  this.usernameInput = browser.driver.findElement(by.id('username'));
  this.passwordInput = browser.driver.findElement(by.id('password'));

  this.get = function() {
    browser.driver.get('http://xxxxxxx');
  };

  this.login = function(username, password) {
    this.usernameInput.sendKeys(username);
    this.passwordInput.sendKeys(password);
    this.form.submit();
  };
};

module.exports = LoginPage;

var LoginPage = require('./page-objects/consulent/LoginPage.js');

describe('SMP+', function() {

  var loginPage = new LoginPage();

  it('Login', function() {
    console.log('------------------->' + loginPage)
    loginPage.get();
    loginPage.login('vdabcor1', 'ldv');
  });
});

If you are using a non-angular app I would recommend you to do:
browser.ignoreSynchronization = true;

And then use standard element finders:
var LoginPage = function() {
  this.form = element(by.name('ldap_login_form'));
  this.usernameInput = $('#username');
  this.passwordInput = $('#password');

  this.get = function() {
    browser.get('http://xxxxxxx');
  };

  this.login = function(username, password) {
    this.usernameInput.sendKeys(username);
    this.passwordInput.sendKeys(password);
    this.form.submit();
  };
};

module.exports = LoginPage;

I bypassed it by just putting the whole code in an onPrepare function in the conf-file.
No need for pageobjects for the non-angular pages then.

authors: alecxe andresdominguez cambiph

repo: angular/protractor


text:
没有termsrv服务，用rdp wrap跑了也不行

termsrv.dll.zip

TermService.zip
覆盖一下注册表看下

覆盖注册表，问题解决了，但是3389端口还是no，系统版本是10.0.22631.3737，termsrv是10.0.22621.3672

termsrv.zip

抱歉，我重启，问题就好了

repo: anhkgg/SuperRDP


text:
Default skip intro length setup issue

Steps to reproduce
open aniyomi go to more - settings - player - default skip intro length
set it to any number it'll show -1 of actual preference number
https://github.com/aniyomiorg/aniyomi/assets/101493467/a7698469-02e9-4ae9-9f0f-d40db1eb631d
Expected behavior
85s should show/set 85s
86s should show/set 86s and so on
Actual behavior
85s shows/sets 84s
86s shows/sets 85s
Crash logs
No response
Aniyomi version
r7519
Android version
Android 12
Device
Iqoo 3 5G
Other details
it also causes some other issues like if you long press on +85 inside the player it becomes 86 without touching it, not sure if it's completely relevant or not.
Acknowledgements

[X] I have searched the existing issues and this is a new ticket, NOT a duplicate or related to another open or closed issue.
[X] I have written a short but informative title.
[X] If this is an issue with an official extension, I should be opening an issue in the extensions repository.
[X] If this is an issue with an official manga extension and this issue can be replicated in the Tachiyomi app, that I should be opening an issue in Tachiyomi's extensions repository.
[X] I have gone through the FAQ and troubleshooting guide.
[X] I have updated the app to version 0.15.2.4.
[X] I have updated all installed extensions.
[X] I will fill out all of the requested information in this form.

FYI: Looking into this issue.

should be fixed in #1598

authors: SoniKarsh abdallahmehiz fakebhai

repo: aniyomiorg/aniyomi


text:
add test for the endpoints

[x] write test for hello world endpoint
[ ] write test for bye world endpoint

a good article on testing nodejs with mongodb
https://www.freecodecamp.org/news/how-to-test-in-express-and-mongoose-apps/

If encounter port in use due to test
https://stackoverflow.com/questions/54422849/jest-testing-multiple-test-file-port-3000-already-in-use


text:
🛑 Grafana is down

In 947e88d, Grafana (https://grafana.mikrotik24.duckdns.org) was down:

HTTP code: 0
Response time: 0 ms

Resolved: Grafana is back up in f63583e after 231 days, 22 hours, 11 minutes.


text:
Greetbot issue-196

It's my first time making a Github bot . Would be glad if someone helps with the errors .
Closes: #196

I am willing on work on some other issue too . As I don't have much experience with bots.

@AmanJain18 Could you help you!

That would be great if
@AmanJain18 could help me .
I am new to making github bots so could use some help.

authors: SargamPuram anmode

repo: anmode/grabtern-frontend


text:
Resolve relative URLs

Happens in HN and EchoJS atm. When href = e.g. "/item?id=1234" we should return the full URL

Rough idea: Have a context whenever we are scraping a certain website?

repo: anmonteiro/mns


text:
Don't fetch config

Since we are only going to send events to our cloud function we don't need to fetch the config.
The config is used to be able to send event directly to other destinations such as GA or amplitude

LGTM

authors: Jaxing fotel

repo: annotell/rudder-sdk-js


text:
🛑 Pedacademy is down

In 19348aa, Pedacademy (https://педакадемия.рф) was down:

HTTP code: 0
Response time: 0 ms

Resolved: Pedacademy is back up in 2f4c7b0 after 12 minutes.

repo: ano-pedproject/repo


text:
anoma ledger should exit with a nonzero exit code on errors

I ran anoma ledger v0.6.1 on namada-cq-2.a6ebeb093671093b21. It ran for a while, then it printed this:
I[2022-07-20|09:42:23.525] indexed block                                module=txindex height=34641
panic: Failed to process committed block (34642:753C54ED5AE04EB1E2E119BAA15045111A631DB55A5ADE596485EE7C4B10F44A): wrong Block.Header.AppHash.  Expected 8294B69F232CBA14FD07D15A378B86C1ABECD2BEBA107897D2402AEE033D5FB4, got 0900257A013ADE5D952B60A422AE9E2CF2297F2D92D6ECF1D38DFA711E31A507
goroutine 31 [running]:
github.com/tendermint/tendermint/blockchain/v0.(*BlockchainReactor).poolRoutine(0xc0000fbc00, 0x0)
        github.com/tendermint/tendermint/blockchain/v0/reactor.go:401 +0x1265
created by github.com/tendermint/tendermint/blockchain/v0.(*BlockchainReactor).OnStart
        github.com/tendermint/tendermint/blockchain/v0/reactor.go:110 +0x85
2022-07-20T09:42:23.535181Z  INFO anoma_apps::node::ledger: Tendermint node is no longer running.
2022-07-20T09:42:23.535201Z ERROR anoma_apps::node::ledger: Err(Tendermint(Runtime("exit status: 2")))
2022-07-20T09:42:23.535209Z  INFO anoma_apps::node::ledger: Tendermint has exited, shutting down...
2022-07-20T09:42:23.535257Z  INFO anoma_apps::node::ledger: Anoma ledger node has shut down.

and then it exited with a regular 0 exit code, which suggests that everything is fine, but from the logs it doesn’t look fine. It should exit with a nonzero exit code, so that e.g. systemd can mark the service as failed.

Thanks for the report! The ledger should definitely not exit with 0. I'm gonna transfer this issue to anoma/namada repository.
The reason you're getting this error is that v0.6.1 is not compatible with this chain (it doesn't include MASP yet, that's why it's failing on this shielded transaction), it needs to be compiled from export NAMADA_COMMIT='f1afdffd5e43ad4bb448db7bf5bc1e23464350f7' (see https://docs.namada.net/testnets/namada-close-quarters-testnet-1.html#chain-information).

authors: ruuda tzemanovic

repo: anoma/anoma


text:
Cryptobike.toml for tesntet-15

Description
All previous genesis validators should name their PRs "Update {validator_alias}.toml for tesntet-15" and provide links to previous PRs merged.
If this is an UPDATE for a previous genesis validator
Checks are made against your net_address. If this has changed since the previous testnet, make sure you provide links of previous prs merged from your previous git username.
Thanks in advance!
Checklist before merging

[x] Only one toml is added in this PR
[x] The file being added is indeed a .toml file
[x] The toml being added is to the correct folder, and only to the correct folder
[x] The eth_hot_key and eth_cold_key are present
[x] The email, discord, elements telegram, and twitter fields are present and valid

This validator was not recognised as a previous validator and has update in the title. Please read the description.

repo: anoma/namada-testnets


text:
Add dfdx to crates

Do I need to add anything else like links to github or crates.io?

@coreylowman This just failed CI:
unknown variant `reinforcement-learning`, expected one of `scientific-computing`, `gpu-computing`, `neural-networks`, `metaheuristics`, `data-preprocessing`, `data-structures`, `clustering`, `decision-trees`, `linear-classifiers`, `reinforcement`, `nlp` at line 114 column 31

Once that's corrected, it can be merged.

Thanks @anowell, should be fixed now!

Thanks. Merged.

authors: anowell coreylowman

repo: anowell/are-we-learning-yet


text:
[Feature request]: Grouped Resources: Support for mod Critter Inventory

Is your feature request related to a problem? Please describe.
When using Grouped Resources together with the mod Critter Inventory, which adds critters to the resource list, pinned critters are not inside any category but outside, under the main point.
Describe the solution you'd like
Critters should be shown under the appropriate category (wild/tame/artificial critters)

I hadn't gotten around to trying Stephen's critter inventory mod (only even found out it existed earlier today for unrelated reasons). I'm honestly glad that it works at all. I've had a quick look through Stephen's mod's source code, and we both modify the same code, so it'll be a little it to disentangle what needs to happen here, and if it's anything major, it's going to fall behind getting save/load for the expanded state of categories and per asteroid state, currently.

Thanks for the replay. Honestly, it's not the most important feature, so don't worry about prioritizing other things first. I just thought I would mention it.

repo: anpilley/OniModSet


text:
Migrate all icons to font-awesome

Currently, we're using various images as icons for different functionality. The icons tend to mix up sometimes with the background and aren't clearly visible. I'm thinking of porting all icons while maintaining their positions to use white fa icons with a black border, also on hovering over an icon, it should expand by say 5% or 10% and it should be slight gray filled in that case.

[x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.
[x] This issue is for enhancement/bug fixing.
[ ] This issue is an addition to JSON database.
[x] I have gone through Contribution Guidelines.
[ ] Assign this issue to me.

I'll do this task

Hey, @darrylsepeda welcome onboard!
Go for it 👍

I have added few icons and make PR, please kindly check.
I tried to replace your play/pause button, but still don't know how because you replace the class using javascript.
I also curious about index.html line 18, there is require jquery, this shows error because require is not defined.. why do u import your jquery like that?

I'll try to help for other tasks tomorrow :)

Thanks, Changes look great!
About line 18 in which I required jquery since it was needed to run the desktop app https://github.com/anshumanv/ongaku-desktop which was using this repo as a submodule, that no longer persists so I'll remove it, thanks for bringing that to notice.
The icons lack animation and some refinement, could you please check http://openings.moe to get the picture of how to improve it?

Also, there are some extra files like .idea and some fa cache, please remove them as well.

Already remove .idea folder.. :)
I'll try to look at other things tomorrow

Sure thing, make sure you get your PR merged before others start sending theirs 😆

please kindly check for the animation

Animation looks cool as of now, why not make the size to 2x and add some thin black border?
4x takes a lot of screen space 😅

hahaha I make it 4x because I think the previous icon size same as that..
done, 2x with some thin black border

Thanks so much @darrylsepeda, I really appreciate the help. 😄

authors: anshumanv darrylsepeda

repo: anshumanv/ongaku