Comments (13)
it seems like your code on iOS is static, while android has dynamic content. So most likely angular itself is using setAttribute (correctly) on iOS and setProperty on Android (which has no namespace support)
from angular.
Hello!
Can you please enable the NativeScript Angular logs (set Trace.enable() in your polyfills.ts, and enable the NativeScriptDebug.rendererTraceCategory
).
You should be seeing this log on the screen:
NativeScriptDebug.rendererLog(`NativeScriptRenderer.setAttribute ${namespace ? namespace + ':' : ''}${el}.${name} = ${value}`);
I suspect this issue comes from the angular side, not our side, so most likely that log will be setting the string value itself instead of evaluating the expression. The NativeScript angular integration doesn't evaluate any expressions, we just apply what angular provides to us via the Renderer2 API
from angular.
Hello @edusperoni , not sure how I have to do it. could you please explain what I have to set in polyfills.ts.
So far I only used Trace by putting the following code into app.module.ts
import { Trace } from '@nativescript/core';
Trace.addCategories(Trace.categories.Style)
Trace.enable();
However, there seems to be no category NativeScriptDebug.rendererTraceCategory
from angular.
@edusperoni, I tried to set
Trace.addCategories(Trace.categories.All)
as I was not able to import NativeScriptDebug
import { NativeScriptDebug } from '@nativescript/angular/lib/trace';
Trace.addCategories(NativeScriptDebug.rendererTraceCategory);
Trace.enable();
and I also tried to set it as string Trace.addCategories('NativeScriptDebug.rendererTraceCategory').
The later does not work and the first one does not result in any output of NativeScriptDebug.rendererLog.
I finally also tried to set
import { Trace } from '@nativescript/core';
Trace.enable();
in src/polyfill.ts, but I do not get any NativeScriptRenderer.setAttribute output either.
Please provide a more detailed description how I can enable it.
from angular.
The NativeScriptDebug is exported as ɵNativeScriptAngularDebug
. In any case, you can enable the category 'ns-renderer' instead
from angular.
I now did try both variants in app.module.ts, but I do not see any output
import { Trace } from '@nativescript/core';
import { ɵNativeScriptAngularDebug } from '@nativescript/angular';
Trace.addCategories(ɵNativeScriptAngularDebug.rendererTraceCategory);
Trace.enable();
and Trace.addCategories('ns-renderer');
Trace.enable();
from angular.
ok, got it. Had to go into polyfills.ts
It looks like the expression is evaluated, see attached file line 1404 and 1405
ns-renderer: NativeScriptRenderer.setProperty GridLayout(107).:android:columns = *,10,*
ns-renderer: NativeScriptRenderer.setProperty GridLayout(107).:android:rows = *,10,*,10,*
This looks correct?
It looks awkward to me ":android:"
Update: I just compared it against the old NS Angular version 17.2.1 there it looks different
ns-renderer: NativeScriptRenderer.setProperty GridLayout(107).columns = *,10,*
ns-renderer: NativeScriptRenderer.setProperty GridLayout(107).rows = *,10,*,10,*
Seems like the android prefix is broken? Should be removed?
from angular.
@cjohn001 is there any calls to setAttribute on the old one? Seems like the new version isn't calling setAttribute
with the namespace.
Seems like angular might have changed the way it stets these kinds of properties. I'll take a look later if this is something it makes sense for us to support or not.
In the meantime I highly recommend using a function/getter instead and bind that to the colums/rows, as it'll avoid multiple evaluation calls too (right now your code will process row/columns for both platforms, but only select one of them). Something like:
get rows() {
if(isAndroid) {
if(this._tinyScreen....) { ... }
return '....';
}
return '....';
}
from angular.
@edusperoni you mean if I am calling setAttribute? No.
In regards to the android: ios: you do not want to support it anymore? In that case I would have to check my entire code for it. Use it for multiple attributes..
One more question to this regarding efficiency. I think to remember to have red that I also should not call functions from templates when possible as those are to be evaluated for each redraw. I am therefore wondering if the approach you provided is more efficient. Or should I maybe use a signal for it? Seems like those somtimes work and sometimes do not. I observed them not to refresh. However, here refresh is not required as the platform never changes
from angular.
it's not that we don't want to support it anymore, it's that angular is changing how it sets those, so we'd need to work around it. Ever since I wrote the tests for it, dynamic values didn't work properly (while static values like you tried, work, because properties don't have namespaces, while attributes do). I personally don't use that feature for dynamic values because of that, and most of the time it's better to use a getter or function instead.
from angular.
Ok, than I better change my code. Would be good to skip this feature than with a new major release. How about using a signal instead. I think you had answered before I finished updating my question :)
from angular.
And maybe a last question to the topic. I am wondering why this stuff works on ios and not on android. I thought the same angular library is used on both platforms. Do you have an idea why this could be?
from angular.
It also affects platform-specific css (https://docs.nativescript.org/guide/styling#platform-specific-css) when used with dynamic values.
from angular.
Related Issues (20)
- iOS NavigateByURL with transition name: 'slideRight' causes blank page HOT 1
- ios only: starting a transition animation when another transition is pending causes current page to be deleted, seems to be related to a CSS bug. HOT 1
- angular 14+ modal back navigation issue HOT 1
- [ios sim only]: iOS 16.4 simulator textChange behavior note HOT 1
- Seems like relativeTo is deprecated please upgrade to new API
- Outlet becomes unresponsive/freezes when using nested outlets, Android only HOT 6
- Support Angular 16's new component route data binding
- Support Typescript 5
- Dark/Lightmode switch breaks on view after a programmatic change of view's background-color HOT 1
- Cannot build against Angular 16.1 HOT 4
- Cannot run in Angular 16.1.2 - ERROR ReferenceError: queueMicrotask is not defined HOT 6
- NativeScript 8 Angular 15 TextField Model Binding missing last char HOT 2
- Gridlayout is stupid (or me)
- Nested navigation doesn't work with LazyLoad (iOS) HOT 2
- Animations do not run in Angular 17 HOT 6
- [question] how nativescript works with angular ? HOT 2
- Angular computed signals are not getting updated
- ios: layout changes in deviceOrientationChanged are not always correctly updated on display
- Wrong back navigation after using nested outlets with the TabsComponent HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.